当前位置: 编程技术>jquery
jquery全选与反选插件怎么写？实例代码
来源: 互联网 发布时间：2014-10-09
本文导语: 用jquery实现一个全选与反选的插件，表单列表数据的全选与取消全选功能，内含示例，小巧实用。 自动判断当前选中数量，加上全选。 将它命名为jQuery.fn.check插件。 功能需求： 1、所有复选框的状态都随全选复选框的状态而...
用jquery实现一个全选与反选的插件，表单列表数据的全选与取消全选功能，内含示例，小巧实用。
自动判断当前选中数量，加上全选。
将它命名为jQuery.fn.check插件。
功能需求：
1、所有复选框的状态都随全选复选框的状态而发生变化；
2、如果所有复选框都被选中时，全选复选框立即处于选中状态；
3、如果当前选中复选框的数量小于复选框的总数时，全选复选框立即处于非选中状态；
所以，在那些处于全选复选框控制之下的复选框全被点击时，就需要时刻判断当前被选中复选框的个数，从而决定全选复选框是否被选中。
1，复选框：
全选
单选1
单选2
单选3
2，jQuery全选返选插件及调用如下。
代码示例:
$(function () {
//调用全选插件
$.fn.check({ checkall_name: "checkall", checkbox_name: "check" })
});
//全选插件 www.
//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);
//调用全选插件
$.fn.check({ checkall_name: "checkall", checkbox_name: "check" })
});
//全选插件 www.
//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);
您可能感兴趣的文章：
- jquery实现checkbox全选全不选(示例)
- jquery实现全选、反选、删除、添加的功能
- jQuery实现CheckBox全选、全不选的示例代码
- jquery实现checkbox的全选、取消及跨页保存
- jquery全选、反选、将选中的表单值分割为字符串
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。