【jQuery插件】全选反选效果

重要决定使用jQuery框架了。

第一次开发jQuery的插件,很简单一个全选反选效果;欢迎大家提出意见。

看插件的源码:

JavaScript代码
  1. /** ?
  2. ?*?@author?码头?https://www.html.cn ?
  3. ?*?这是全选反选的jq组件 ?
  4. ?*?调用: ?
  5. ?*?$(“#checked?input[type=checkbox]”).checkBox(“all”);————————全选 ?
  6. ?*?$(“#checked?input[type=checkbox]”).checkBox(“none”);———————–全不选 ?
  7. ?*?$(“#checked?input[type=checkbox]”).checkBox(“toggle”);———————反选 ?
  8. ?*?alert($(“#checked?input[type=checkbox][checked]”).checkedValue());———看看我选择了什么 ?
  9. ?*/??
  10. (function($){ ??
  11. ????$.fn.checkBox?=?function(state){ ??
  12. ????????this.each(function(){ ??
  13. ????????????switch?(state)?{ ??
  14. ????????????????case?‘all’: ??
  15. ????????????????????$(this).attr(“checked”,true); ??
  16. ????????????????????break; ??
  17. ????????????????case?‘none’: ??
  18. ????????????????????$(this).attr(“checked”,false); ??
  19. ????????????????????break; ??
  20. ????????????????case?‘toggle’: ??
  21. ????????????????????$(this).attr(“checked”,!this.checked); ??
  22. ????????????????????break; ??
  23. ????????????} ??
  24. ????????}); ??
  25. ????}; ??
  26. ????$.fn.checkedValue?=?function(){ ??
  27. ????????var?str=[]; ??
  28. ????????this.each(function(){ ??
  29. ????????????str+=$(this).val()+“,”; ??
  30. ????????}) ??
  31. ????????return?str; ??
  32. ????}; ??
  33. })(jQuery);??

演示demo:https://www.html.cn/demo/jQuery/checkBox.html

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【jQuery插件】全选反选效果

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    看看我的例子:
    http://www.51obj.cn/demo/jquery/jquery_table.html

    walkingp9年前 (2009-10-17)回复
    • walkingp 的写法 貌似在最新版本的JQUERY 库中 失效了

      Roam8年前 (2011-05-16)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏