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 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全选功能代码优化的更多相关文章
- S全选功能代码
JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...
- jquery与js实现全选功能的区别---2017-05-12
一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...
- JS实现全选功能
000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
- EasyUI datagrid 复选框可以多选但不能全选功能实现
1.功能需求: 实现多选,但是不能够全选功能 2.js代码 //帮卖列表页面,可以多选但是不能够全选实现 $(".datagrid-header-check").children ...
- C# winform中的datagridview控件标头加入checkbox,实现全选功能。
/// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...
- jquery实现全选功能
主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...
- Form - CHECKBOX全选功能
FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...
- Android ListView条目全选功能,不用checkbox实现!
大家好,翻了翻曾经的笔记,发现了一个我特别标记的功能,那就是ListView全选功能,顿时想起了我那个时候苦逼的生涯,因为我大学机械出身,大学毕业了都不知道什么叫代码,在58干了一段销售.实在是干不下 ...
随机推荐
- 从"分层二进制输出"至"解决二进制树深度"总结
本文研究的摘要,欢迎转载,但请注明出处:http://write.blog.csdn.net/postedit/41964669 近期在刷LettCode上的算法题,发现好多题目的解题思路大体是一致的 ...
- android 视频通话开启呼叫等待后,来第三方的视频通话,接通后通话时间一直显示为0,过几秒之后视频通话自己主动挂断
开启通话设置视频通话的"来电等待"; 步骤1:測试机和配合机A处于视频通话过程中; 步骤2:配合机B向測试机呼出视频电话; 步骤3:測试机接听配合机B的视频来电; 现象:视频通话过 ...
- Netty In Action中文版 - 第一章:Netty介绍
本章介绍 Netty介绍 为什么要使用non-blocking IO(NIO) 堵塞IO(blocking IO)和非堵塞IO(non-blocking IO)对照 Java NIO的问题和在Nett ...
- x264 - open gop and closed gop
GOP - Group of picture(影像集团),它指的是两个I帧之间的距离. Reference(基准期). 它指的是两个P帧之间的距离. 简而言之, 跨参考gop的,变open gop: ...
- AVR文章7课时:动态数字化控制
下面是动态数码管的电路图. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva290ZWlfODhfbHVsdWNfNjY=/font/5a6L5L2T/fo ...
- 金蝶K3管理软件PDA条码解决方式,盘点机与金蝶K3无缝对接
申明:以上文字为"武汉汉码科技有限公司"原创,转载时务必注明出处. 技术分享,沟通你我,共同进步!www.hanma-scan.com 原帖:http://www.hanma-sc ...
- PHP上传文件(学习)
<?php if(isset($_FILES['upfile'])) { if (is_uploaded_file($_FILES['upfile']['tmp_name'])){ $upfil ...
- Web Host消息处理管道
Web Host消息处理管道 前言 我们知道Web API本身是无法提供请求-响应的机制,它是通过Web Host以及Self Host的寄宿的宿主方式来提供一个请求-响应的运行环境.二者都是将请求和 ...
- hdu 4407 Sum 容斥+当前离线
乞讨X-Y之间p素数,,典型的纳入和排除问题,列的求和运算总和的数,注意,第一项是最后一个项目数. 如果不改变到第一记录的答案,脱机处理,能保存查询,候,遇到一个操作1,就遍历前面的操作.把改动加上去 ...
- 脚本+批处理打造IIS监控器
原文 脚本+批处理打造IIS监控器 首先说下我什么要写它,第一.它可以帮你做一件事,那就是随时给你监控你公司的网站服务器的状态,一旦你的网站出现问题不能访问了,它就会自动帮你重启IIS然后让死掉的网站 ...