JavaScript--全选与反选
在学习js中发现全选与反选也有很多种：
例如：
一. 按钮版全选与多选
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button>全选</button> 9 <button>反选</button> 10 <button>取消选择</button> 11 <button>提交</button> 12 <input type="checkbox" name="cbox[]" value="你"/> 13 <input type="checkbox" name="cbox[]" value="是"/> 14 <input type="checkbox" name="cbox[]" value="猪"/> 15 <input type="checkbox" name="cbox[]" value="八"/> 16 <input type="checkbox" name="cbox[]" value="戒"/> 17 <input type="checkbox" name="cbox[]" value="二"/> 18 <input type="checkbox" name="cbox[]" value="大"/> 19 </body> 20 </html> 21 <script> 22 "use strict"; 23 var btns = document.getElementsByTagName('button'); 24 var inps = document.getElementsByTagName('input'); 25 // 是否选择 26 var flag; 27 // 全选 28 btns[0].onclick = function () { 29 selectAll(true); 30 } 31 32 // 反选 33 btns[1].onclick = function () { 34 for(var i = 0; i < inps.length ; i++ ) { 35 inps[i].checked = !inps[i].checked; 36 } 37 } 38 39 // 取消选择 40 btns[2].onclick = function () { 41 selectAll(false); 42 } 43 44 // 提交 45 btns[3].onclick = function () { 46 var str = ""; 47 for(var i = 0; i < inps.length ; i++ ) { 48 if (inps[i].checked) { 49 console.log(inps[i].value); 50 str = str + inps[i].value; 51 } 52 } 53 alert(str); 54 } 55 56 // 全选与取消选择公共方法 57 function selectAll(flag) { 58 for(var i = 0; i < inps.length ; i++ ) { 59 inps[i].checked = flag; 60 } 61 } 62 </script>
二.全选与反选多选框版本
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="checkbox" />全选 <input type="checkbox" />反选 <button id="clear">取消选择</button><br/> 9 <input type="checkbox" /><br/> 10 <input type="checkbox" /><br/> 11 <input type="checkbox" /><br/> 12 <input type="checkbox" /><br/> 13 <input type="checkbox" /><br/> 14 <input type="checkbox" /><br/> 15 <input type="checkbox" /><br/> 16 <input type="checkbox" /><br/> 17 <input type="checkbox" /><br/> 18 <input type="checkbox" /><br/> 19 <input type="checkbox" /><br/> 20 </body> 21 </html> 22 <script> 23 /* 24 *功能描述： 全选：全部多选框处于选择状态,全选不处于选择：多选框处于不选择状态 25 * 反选；未选择的变换成功选择状态，选择状态的变为未选择状态 26 * 取消选择： 所有选择状态的多选框都变成未选择状态 27 * 如果下面的多选框全部选中，全选的checkbox就会自动选中 28 * */ 29 30 // 获取多选框 31 var inps = document.getElementsByTagName('input'); 32 var btn = document.getElementById('clear'); 33 var checkTrue =0; // 记录处于选择状态的多选个数 34 // 全选 35 inps[0].onclick = function () { 36 if (inps[0].checked) { 37 inps[1].checked = false ; // 排他 38 for(var i = 0 ; i < inps.length; i++ ) { 39 if (i != 0 && i !=1) { //排除全选与反选功能选择框 40 inps[i].checked = true; 41 } 42 } 43 checkTrue = inps.length - 2 ; 44 }else{ 45 for(var i = 0 ; i < inps.length; i++ ) { 46 if (i !=1 && i!=0) { //排除全选与反选功能选择框 47 inps[i].checked = !inps[i].checked; 48 } 49 } 50 checkTrue = 0 ; 51 } 52 53 } 54 // 反选 55 inps[1].onclick = function () { 56 inps[0].checked = false ; 57 for(var i = 0 ; i < inps.length; i++ ) { 58 if (i !=1 && i!=0) { //排除全选与反选功能选择框 59 inps[i].checked = !inps[i].checked; 60 } 61 } 62 checkTrue = inps.length - 2 - checkTrue ; 63 } 64 65 // 取消选择 66 btn.onclick = function () { 67 for(var i = 0 ; i < inps.length; i++ ) { 68 inps[i].checked = false; 69 } 70 checkTrue = 0 ; 71 } 72 73 // 当全选框没选择中的时候，下面多选框出现全部选择状态，全选框自动选中 74 for(var i = 0 ; i < inps.length; i++) { 75 //排除全选与反选功能选择框,并且记录选择状态 76 if (i !=1 && i!=0 ) { 77 inps[i].onclick = function () { 78 if(this.checked) { 79 ++checkTrue == inps.length-2?inps[0].checked = true:checkTrue; 80 }else{ 81 --checkTrue > 0 ? checkTrue : checkTrue = 0; 82 } 83 console.log(checkTrue); 84 // 多选框出现全部选择状态，全选框自动选中 85 if(checkTrue == inps.length - 2) { 86 inps[0].checked = true; 87 }else{ // 多选框出现一个以上没有在选择状态，全选框自动不选中 88 inps[0].checked = false; 89 } 90 } 91 92 } 93 94 95 } 96 97 98 </script>
难点:
多选框版本的全选与反选，主要要注意全选状态中下面多选框的选中状态，如果有一个以上的多选框不在选中状态就要把全选状态去除，反之，多选框都在选中状态，那么全选框就是要在选中状态
