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代码如下：
基本使用
JS初始化如下：
var checkAll= new CheckAll({ container: '.J_CheckListContainerBasic', checkAll: '.J_CheckAll', checkItem: '.J_CheckItem' },function(){ console.log(checkAll.getValues('.J_CheckItem',"value")); }); 当然为了查看效果，我也提供了JSFIddler地址 供预览：