实现checkbox的全选/全不选/点选/行内点选(原生JS版和jQ版)

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

【查看示例】

功能介绍点此查看

1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致;
2. 自动更改 全选/全不选 选框的状态, 即列表中选框都选中时, 全选/全不选 选框也选中, 反之亦然;
3. 列表行内点击也可选中行内的checkbox, 并与1,2中的功能联动.

原生JS版本核心代码

1. var js_chk = document.forms['js'].chk_can; 
2. var jsitems = document.forms['js'].jsitems; 
3. var jsrows = document.getElementById('js').getElementsByTagName('dd'); 
4.   
5. //判断选中个数与实际选框个数实现全选/全不选框的状态 
6. var chk_canle = function(){ 
7.     var checkedLen = 0; 
8.     //计算列表中选中状态的选框个数 
9.     for (var m = 0; m < jsitems.length; m++) { 
10.         if (jsitems[m].checked) { 
11.             checkedLen += 1; 
12.         } 
13.     } 
14.     //判断选中个数与实际个数是否相同,以确定全选/全不选状态 
15.     for (var m = 0; m < js_chk.length; m++) { 
16.         js_chk[m].checked = (jsitems.length == checkedLen); 
17.     } 
18. } 
19.   
20. //全选与全不选一体实现 
21. for (var i = 0; i < js_chk.length; i++) { 
22.     js_chk[i].onclick = function(){ 
23.         //列表中选框与全选选框统一状态 
24.         for (var m = 0; m < jsitems.length; m++) { 
25.             jsitems[m].checked = this.checked; 
26.         } 
27.         //全选选框统一状态 
28.         for (var m = 0; m < js_chk.length; m++) { 
29.             js_chk[m].checked = this.checked; 
30.         } 
31.     } 
32. } 
33.   
34. //列表中选框点击 
35. for (var i = 0; i < jsitems.length; i++) { 
36.     jsitems[i].onclick = function(e){ 
37.         //阻止冒泡,避免行点击事件中,直接选择选框无效 
38.         e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true; 
39.         chk_canle(); 
40.     } 
41. } 
42.   
43. //行内点击 
44. for (var i = 0; i < jsrows.length; i++) { 
45.     jsrows[i].onclick = function(){ 
46.         //行内点击时,行内的选框状态为原状态取反 
47.         this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked; 
48.         chk_canle(); 
49.     } 
50. } 

jQ版本核心代码

1. var _jq_chk = $('#jq>dl>dt>label>:checkbox'); 
2. var _jqitems = $(':checkbox[name=jqitems]'); 
3. var _rows = $('#jq>dl>dd'); 
4.   
5. //全选与全不选一体实现 
6. _jq_chk.click(function(){ 
7.     //列表中选框和全选选框统一状态 
8.     _jqitems.add(_jq_chk).attr('checked', this.checked); 
9. }); 
10.   
11. //选框的点击事件 
12. _jqitems.click(function(e){ 
13.     //阻止冒泡,避免行点击事件中,直接选择选框无效 
14.     e.stopPropagation(); 
15.     //判断选中个数与实际个数是否相同,以确定全选/全不选状态 
16.     _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size()); 
17. }); 
18.   
19. //点选行时选中行内的checkbox 
20. _rows.bind({ 
21.     mouseenter: function(){ 
22.         $(this).addClass('hover'); 
23.     }, 
24.     mouseleave: function(){ 
25.         $(this).removeClass('hover'); 
26.     }, 
27.     //点选 
28.     click: function(){ 
29.         //行内点击时,行内的选框状态为原状态取反 
30.         $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked) 
31.         //判断选中个数与实际个数是否相同,以确定全选/全不选状态 
32.         _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size()); 
33.     } 
34. });