jQuery全选和取消全选插件及代码分析
发布时间：2018-08-17 11:23:47 所属栏目：传媒 来源：站长网
导读：在前端开发中，经常会出现这种情况：单击某一复选框实现某一行或某一列的复选框在被选中或不被选中的状态间切换。在没有 jQuery 之前，我们需要一大段js代码来实现这种效果。有了jQuery这个强大的库之后，我们可以很方便的开发实现这种效果的jQuery插件。
|
在前端开发中，经常会出现这种情况：单击某一复选框实现某一行或某一列的复选框在被选中或不被选中的状态间切换。在没有jQuery之前，我们需要一大段js代码来实现这种效果。有了jQuery这个强大的库之后，我们可以很方便的开发实现这种效果的jQuery插件。我将它命名为jQuery.fn.selectAll插件。 在构建我们的插件之前，我们想考虑一下其功能需求： 所有复选框的状态都随全选复选框的状态而发生变化； 该插件有一到两个参数： range 定义所有需要进行操作的上下文背景；  引用的内容：[www.veryhuo.com]
var settings = { range:'', func:null }; 接下来要做的是：给所有复选框绑定click事件。在绑定事件之前，先得到除全选复选框之外的所有复选框以及数量。 Copy to Clipboard引用的内容：[www.veryhuo.com]
var checks = $('input[type="checkbox"]',settings.range); var sizes = checks.size(); 对于全选复选框，绑定事件如下： Copy to Clipboard引用的内容：[www.veryhuo.com]
$(“#checkAll”).attr('checked','').click(function(){ var isCheck = $(this).attr("checked"); $(this).checks.attr('checked',isCheck); var checkedSize = $('input[type="checkbox"]:checked',settings.range).size(); if($.isFunction(settings.func)){ settings.func(checkedSize); } }) 对于其他复选框，事件如下： Copy to Clipboard引用的内容：[www.veryhuo.com]
checks.click(function(){ var checkedSize = $('input[type="checkbox"]:checked',settings.range).size(); if(checkedSize < self.sizes){ self.attr('checked',''); }else{ self.attr('checked','checked'); } if($.isFunction(settings.func)){ settings.func(checkedSize); } }) 完整代码如下： Copy to Clipboard引用的内容：[www.veryhuo.com]
/* WelCome To Liehuo.Net */ (function(){ $.fn.selectAll = function(options){ var settings = { range:'', func:null }; return this.each(function(){ if(options) settings = $.extend(settings, options); var self = $(this); var checks = $('input[type="checkbox"]',settings.range); var sizes = checks.size(); $(this).click(function(){ var isCheck = $(this).attr("checked"); checks.attr('checked',isCheck); var checkedSize = $('input[type="checkbox"]:checked',settings.range).size(); if($.isFunction(settings.func)){ settings.func(checkedSize); } }) checks.click(function(){ var checkedSize = $('input[type="checkbox"]:checked',settings.range).size(); if(checkedSize < self.sizes){ self.attr('checked',''); }else{ self.attr('checked','checked'); } if($.isFunction(settings.func)){ settings.func(checkedSize); } }) }) } })(jQuery) 查看代码演示：http://www.veryhuo.com/a/view/12521.html （编辑：武汉站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
