做自媒体需要关注什么网站,为什么要用模板建站?,wordpress的栏目页关键词怎么设置,网站建设 加盟JS全选功能代码优化 原文:JS全选功能代码优化JS全选功能代码优化 最近在看javascript MVC那本书#xff0c;也感觉到自己写的代码也并不优雅#xff0c;所以一直在想 用另一种模式来编写JS代码#xff0c;所以针对之前的简单的JS全选功能来做个简单的demo#xff0c;使用目… JS全选功能代码优化 原文:JS全选功能代码优化JS全选功能代码优化 最近在看javascript MVC那本书也感觉到自己写的代码也并不优雅所以一直在想 用另一种模式来编写JS代码所以针对之前的简单的JS全选功能来做个简单的demo使用目前现在的编码方式来重新编码当然以后会一直用这种方式来编写自己的代码。下面是如下代码 JS所有代码 /*** JS全选* class Checkall* param {Object} cfg* param {Element|selector} [cfg.container] 限定全选的容器* param {selector} cfg.checkAll 全选框* param {selector} cfg.checkItem 子选框*/function CheckAll(cfg,callback) {var self this;this.config cfg;this.container $(cfg.container) || document.body;// 全选自定义事件this.container.delegate(cfg.checkAll,change,function(e){$(e.target).trigger(checkAllChange);});// 单选自定义事件this.container.delegate(cfg.checkItem,change,function(e){$(e.target).trigger(checkItemChange);});// 全选操作this.container.delegate(cfg.checkAll,checkAllChange,function(e){var checked self.isItemChecked(e.target);self._checkAll(checked);// 选中所有子节点self._AllChildrenChecked(checked);callback $.isFunction(callback) callback(self);});// 单选操作this.container.delegate(cfg.checkItem,checkItemChange,function(e){// 检查是否所有子节点都选中了if( self._isChildrenChecked()){self._checkAll(true);}else {self._checkAll(false);}callback $.isFunction(callback) callback(self);});};$.extend(CheckAll.prototype,{/** 选中单个checkbox* param item* param _isCheck*/_checkItem: function(item, _isCheck ){item $(item);item.prop(checked, _isCheck);},/** 选中/反选所有的 全选按钮* method _checkAll {private}* param {Boolean} _isCheck*/_checkAll: function(_isCheck){var self this;this.container.find(self.config.checkAll).each(function(index,item){var isAllChecked self.isItemChecked(item);if(isAllChecked ! _isCheck) {self._checkItem(item,_isCheck);}});},/** 选中/反选 所有的子节点* method _AllChildrenChecked {private}*/_AllChildrenChecked: function(_isCheck){var self this;this.container.find(this.config.checkItem).each(function(index,item){var itemChecked self.isItemChecked(item);if( itemChecked ! _isCheck){self._checkItem(item, _isCheck);}});},/** 是否所有的子节点都选中了*/_isChildrenChecked: function(){var isCheckAll true;var self this;this.container.find(this.config.checkItem).each(function(index,item){if(!self.isItemChecked(item)) {isCheckAll false;}});return isCheckAll;},/** 检查一个元素是否被选中*/isItemChecked: function(item) {return $(item).is(:checked);},/** 获取被选中的所有值 或者 属性 存入数组* todo 比如想获取选中所有项的id或者其他所有项的属性等操作* method getValues {public} * param {elems,attr} 元素所有的dom节点 获取元素对应的属性值* return 返回数组 {rets}*/getValues: function(elems,attr) {var self this,rets [];$(elems).each(function(index,item){var isboolean self.isItemChecked(item);if(isboolean $(item).prop(attr)) {var curAttr $(item).prop(attr);rets.push(curAttr);}});return rets;}}); HTML代码如下 div classcheck-listhrdiv classJ_CheckListContainerBasich4基本使用/h4div classcheck-alllabel全选 input typecheckbox classJ_CheckAll/labelul classsub-checkboxlilabel选中 input typecheckbox classJ_CheckItem value1/label/lililabel选中 input typecheckbox classJ_CheckItem value2/label/lililabel选中 input typecheckbox classJ_CheckItem value3/label/li/ul/div/div
/div JS初始化如下 var checkAll new CheckAll({container: .J_CheckListContainerBasic,checkAll: .J_CheckAll,checkItem: .J_CheckItem},function(){console.log(checkAll.getValues(.J_CheckItem,value));}); 当然为了查看效果我也提供了JSFIddler地址 供预览 JS全选功能演示 posted on 2014-06-26 10:38 NET未来之路 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/lonelyxmas/p/3809573.html
