jQuery全选和打消全选插件及代码说明
发布时间：2018-08-17 16:24:26 所属栏目：业界 来源：站长网
导读：在前端开拓中，常常会呈现这种环境：单击某一复选框实现某一行或某一列的复选框在被选中或不被选中的状态间切换。在没有 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 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读