原生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 相关文章推荐
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
js实现点赞效果
Mar 16 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 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
php 无限级缓存的类的扩展
2009/03/16 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
yii数据库的查询方法
2015/12/28 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
用js实现放大镜效果
2020/10/28 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
python实现用户登录系统
2016/05/21 Python
Python单元测试简单示例
2018/07/03 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
简单了解Python write writelines区别
2020/02/27 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
爱国电影观后感
2015/06/19 职场文书
2016教师节问候语
2015/11/10 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python