jQuery全选反选插件的写法

标签：前端   框架   jquery   ui   web前端   

jQuery全选反选插件，经易让你实现一个表单列表数据的全选与取消全选功能，内含示例，小巧实用。自动判断当前选中数量，加上全选。在没有jQuery之前，我们需要一大段js代码来实现这种效果。有了jQuery这个强大的库之后，我们可以很方便的开发实现这种效果的jQuery插件。我将它命名为jQuery.fn.check插件。前端框架分享

在构建我们的插件之前，我们想考虑一下其功能需求：

所有复选框的状态都随全选复选框的状态而发生变化；如果所有复选框都被选中时，全选复选框立即处于选中状态；如果当前选中复选框的数量小于复选框的总数时，全选复选框立即处于非选中状态； 所以，在那些处于全选复选框控制之下的复选框全被点击时，就需要时刻判断当前被选中复选框的个数，从而决定全选复选框是否被选中。

如有如下复选框：

.代码  

1. <p><input type="checkbox" name="checkall" />全选</p>  
2. <p><input type="checkbox" name="check" />单选1</p>  
3. <p><input type="checkbox" name="check" />单选2</p>  
4. <p><input type="checkbox" name="check" />单选3</p>  

 jQuery全选返选插件及调用如下。前端框架分享

.代码  

1. $(function () {   
2.     //调用全选插件  
3.     $.fn.check({ checkall_name: "checkall", checkbox_name: "check" })  
4. });  
5. //全选插件  
6. //checkall_name   操作全选的复选框name  
7. //checkbox_name   被操作的复选框的name  name值可不统一 设置包含值 以XXX开头 自己修改  
8. (function ($) {  
9.     $.fn.check = function (options) {  
10.         var defaults = {  
11.             checkall_name: "checkall_name", //全选框name  
12.             checkbox_name: "checkbox_name" //被操作的复选框name  
13.         },  
14.         ops = $.extend(defaults, options);  
15.         e = $("input[name=‘" + ops.checkall_name + "‘]"), //全选  
16.         f = $("input[name=‘" + ops.checkbox_name + "‘]"), //单选  
17.         g = f.length; //被操作的复选框数量  
18.         f.click(function () {  
19.             $("input[name =‘" + ops.checkbox_name + "‘]:checked").length == $("input[name=‘" + ops.checkbox_name + "‘]").length ? e.attr("checked", !0) : e.attr("checked", !1);  
20.         }), e.click(function () {  
21.             for (i = 0; g > i; i++) f[i].checked = this.checked;  
22.         });  
23.     };  
24. })(jQuery);  

jQuery全选反选插件的写法

标签：前端   框架   jquery   ui   web前端   

原文地址：http://blog.csdn.net/ariss123/article/details/38869985