jquery全选与反选插件怎么写?实例代码

发布时间:2019-09-21编辑:脚本学堂
分享下jquery全选与反选插件的实现代码,表单列表数据的全选与取消全选功能,需要的朋友参考下。

jquery实现一个全选与反选的插件表单列表数据的全选与取消全选功能,内含示例,小巧实用。
自动判断当前选中数量,加上全选。
将它命名为jQuery.fn.check插件。

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

1,复选框:
 

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

2,jQuery全选返选插件及调用如下。
 

复制代码 代码示例:
$(function () {  
    //调用全选插件 
    $.fn.check({ checkall_name: "checkall", checkbox_name: "check" }) 
}); 
//全选插件 www.jb200.com
//checkall_name   操作全选的复选框name 
//checkbox_name   被操作的复选框的name  name值可不统一 设置包含值 以XXX开头 自己修改 
(function ($) { 
    $.fn.check = function (options) { 
        var defaults = { 
            checkall_name: "checkall_name", //全选框name 
            checkbox_name: "checkbox_name" //被操作的复选框name 
        }, 
        ops = $.extend(defaults, options); 
        e = $("input[name='" + ops.checkall_name + "']"), //全选 
        f = $("input[name='" + ops.checkbox_name + "']"), //单选 
        g = f.length; //被操作的复选框数量 
        f.click(function () { 
            $("input[name ='" + ops.checkbox_name + "']:checked").length == $("input[name='" + ops.checkbox_name + "']").length ? e.attr("checked", !0) : e.attr("checked", !1); 
        }), e.click(function () { 
            for (i = 0; g > i; i++) f[i].checked = this.checked; 
        }); 
    }; 
})(jQuery);