原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)


Posted in Javascript onOctober 29, 2016

日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数.

原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

功能介绍点此查看DEMO演示

1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致;
2. 自动更改 全选/全不选 选框的状态, 即列表中选框都选中时, 全选/全不选 选框也选中, 反之亦然;
3. 列表行内点击也可选中行内的checkbox, 并与1,2中的功能联动.
另,本文重在写全选, 鼠标划入划出背景变色为简易实现, 更加完善的请参考:

原生JS版本核心代码

html代码

<form id="js" name="js" action="#">
		<h5>原生JS样例</h5>
		<dl>
			<dt><label for="js_chk_0"><input type="checkbox" id="js_chk_0" name="chk_can" value="" />全选/全不选</label></dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd>
			<dt><label for="js_chk_1"><input type="checkbox" id="js_chk_1" name="chk_can" value="" />全选/全不选</label></dt>
		</dl>
	</form>

原生js代码

//原生JS实现全选全不选类
window.onload = function iCheckAll(){
 var js_chk = document.forms['js'].chk_can;
 var jsitems = document.forms['js'].jsitems;
 var jsrows = document.getElementById('js').getElementsByTagName('dd');
	
 //判断选中个数与实际选框个数实现全选/全不选框的状态
 var chk_canle = function(){
  var checkedLen = 0;
		//计算列表中选中状态的选框个数
  for (var m = 0; m < jsitems.length; m++) {
   if (jsitems[m].checked) {
    checkedLen += 1;
   }
  }
		//判断选中个数与实际个数是否相同,以确定全选/全不选状态
  for (var m = 0; m < js_chk.length; m++) {
   js_chk[m].checked = (jsitems.length == checkedLen);
  }
 }
 
	//全选与全不选一体实现
 for (var i = 0; i < js_chk.length; i++) {
  js_chk[i].onclick = function(){
			//列表中选框与全选选框统一状态
   for (var m = 0; m < jsitems.length; m++) {
    jsitems[m].checked = this.checked;
   }
			//全选选框统一状态
   for (var m = 0; m < js_chk.length; m++) {
    js_chk[m].checked = this.checked;
   }
  }
 }
	
	//列表中选框点击
 for (var i = 0; i < jsitems.length; i++) {
  jsitems[i].onclick = function(e){
			//阻止冒泡,避免行点击事件中,直接选择选框无效
   e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true;
   chk_canle();
  }
 }
	
 //行内点击
 for (var i = 0; i < jsrows.length; i++) {
  jsrows[i].onclick = function(){
			//行内点击时,行内的选框状态为原状态取反
   this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked;
   chk_canle();
  }
		//划入划出请参考http://mrthink.net/javascript-tagnames-highlight/
  jsrows[i].onmouseover = function(){
   this.className = 'hover';
  }
  jsrows[i].onmouseout = function(){
   this.className = '';
  }
 }
}

jquery版本核心代码

html代码

<form id="jq" name="jq" action="#">
		<h5>jQuery样例</h5>
		<dl>
			<dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />全选/全不选</label></dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消</dd>
			<dt><label for="jq_chk_1"><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />全选/全不选</label></dt>
		</dl>
	</form>

jquery核心实现代码

//jQ实现全选全不选
$(function(){
 var _jq_chk = $('#jq>dl>dt>label>:checkbox');
 var _jqitems = $(':checkbox[name=jqitems]');
 var _rows = $('#jq>dl>dd');
 
 //全选与全不选一体实现
 _jq_chk.click(function(){
		//列表中选框和全选选框统一状态
  _jqitems.add(_jq_chk).attr('checked', this.checked);
 });
	
 //选框的点击事件
 _jqitems.click(function(e){
  //阻止冒泡,避免行点击事件中,直接选择选框无效
  e.stopPropagation();
		//判断选中个数与实际个数是否相同,以确定全选/全不选状态
  _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
 });
	
 //点选行时选中行内的checkbox
 _rows.bind({
  mouseenter: function(){
   $(this).addClass('hover');
  },
  mouseleave: function(){
   $(this).removeClass('hover');
  },
		//点选
  click: function(){
			//行内点击时,行内的选框状态为原状态取反
   $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked)
			//判断选中个数与实际个数是否相同,以确定全选/全不选状态
   _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
  }
 });
});

这个代码比普通的实现代码要多不少,主要表现为点击行就可以实现选择功能。更多的功能更多的代码。大家可以根据需要自行删减。

相信很多做web的人都会遇到一些JS问题,那到底是用JQ来实现还是用JS来实现,常常困扰着我们,但其实JS是通用的,而JQ是建在自己加载的JQ库的,所在真正实现是没有任何区别的。

Javascript 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 #Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 #Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 #Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 #Javascript
RequireJS简易绘图程序开发
Oct 28 #Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 #Javascript
微信小程序 页面跳转传参详解
Oct 28 #Javascript
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
vue组件生命周期详解
2017/11/07 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
python switch 实现多分支选择功能
2020/12/21 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
跟单业务员岗位职责
2014/03/08 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
yy生日主持词
2014/03/20 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
PHP实现两种排课方式
2021/06/26 PHP