原文: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 class="check-list">
<hr>
<div class="J_CheckListContainerBasic">
<h4>基本使用</h4> <div class="check-all">
<label>全选 <input type="checkbox" class="J_CheckAll"></label>
<ul class="sub-checkbox">
<li><label>选中 <input type="checkbox" class="J_CheckItem" value="1"></label></li>
<li><label>选中 <input type="checkbox" class="J_CheckItem" value="2"></label></li>
<li><label>选中 <input type="checkbox" class="J_CheckItem" value="3"></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全选功能演示

JS全选功能代码优化的更多相关文章

  1. S全选功能代码

    JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...

  2. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

  3. JS实现全选功能

    000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...

  4. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  5. EasyUI datagrid 复选框可以多选但不能全选功能实现

    1.功能需求:  实现多选,但是不能够全选功能 2.js代码 //帮卖列表页面,可以多选但是不能够全选实现 $(".datagrid-header-check").children ...

  6. C# winform中的datagridview控件标头加入checkbox,实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  7. jquery实现全选功能

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...

  8. Form - CHECKBOX全选功能

    FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...

  9. Android ListView条目全选功能,不用checkbox实现!

    大家好,翻了翻曾经的笔记,发现了一个我特别标记的功能,那就是ListView全选功能,顿时想起了我那个时候苦逼的生涯,因为我大学机械出身,大学毕业了都不知道什么叫代码,在58干了一段销售.实在是干不下 ...

随机推荐

  1. iOS经常使用类别

    我们发现,慢慢积累了很多自己写的各种类别的. .今天,无私.张贴 1.NSDateFomatter @interface NSDateFormatter (MyCategory) + (id)date ...

  2. HDD-FAT32 ZIP-FAT32

    在使用U当家U盘启动盘制作工具的时候会看到一个模式的选项,模式分为HDD-FAT32和ZIP-FAT32两个常用的模式,其它的模式几乎用不到的.那么HDD-FAT32和ZIP-FAT32模式到底有什么 ...

  3. 认识javascript范围和作用域链

    范围 作用域就是变量和函数的可訪问范围.控制着变量和函数的可见性与生命周期,在JavaScript中变量的作用域有全局作用域和局部作用域. 全局和局部作用域以下用一张图来解释: 单纯的JavaScri ...

  4. hdu 4945 2048 (dp+组合的数目)

    2048 Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submi ...

  5. ASP.NET5 Beta8

    ASP.NET5 Beta8 ASP.NET5 beta8现已上都的NuGet作为一个工具升级到Visual Studio2015!此版本极大地扩展.NET核心对OS X和Linux所支持的范围.您现 ...

  6. poj 1185 火炮 (减少国家DP)

    火炮 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 19690   Accepted: 7602 Description 司 ...

  7. Xenomai 3 和 PREEMPT_RT 有哪些优势相比,

    Q: 我可以在我的开发板PREEMPT_RT直接在内核环境中执行POSIX应用, 使用Xenomai3 这是什么原因它? A:假设你的应用程序已经完全是POSIX,而且性能也满足,则,而且也没有理由去 ...

  8. eclipse 在win7 64两个图标出现位操作系统无法锁定到任务栏或任务栏

    eclipse 在win7 64位操作系统无法锁定到任务栏或者任务栏上出现两个图标 解决的方法 eclipse在win7 64bit下无法锁定到任务栏问题(或是锁定后任务栏出现两个eclipse图标) ...

  9. REST|RESTful初步认识

    工作中要用到jersey来实现restful风格的webservice.对于webservice另一定的认知(能够觉得是一种服务,远程调用的组件),可是对于restful笔者根本就木有了解过,rest ...

  10. MySQL 更新中国列:1366 Incorrect string value 问题解决了

    周围环境:Win7 64位置,mysql-5.6.25-winx64,MySQL workbench 问题:MySQL在更新时出现异常: warning(s): 1366 Incorrect stri ...