HTML结构:
1 <div class="wrap"> 2 <table> 3 <thead> 4 <tr> 5 <th> 6 <input type="checkbox" id="j_cbAll" /> 7 </th> 8 <th>商品</th> 9 <th>价钱</th> 10 </tr> 11 </thead> 12 <tbody id="j_tb"> 13 <tr> 14 <td> 15 <input type="checkbox" /> 16 </td> 17 <td>iPhone8</td> 18 <td>8000</td> 19 </tr> 20 <tr> 21 <td> 22 <input type="checkbox" /> 23 </td> 24 <td>iPad Pro</td> 25 <td>5000</td> 26 </tr> 27 <tr> 28 <td> 29 <input type="checkbox" /> 30 </td> 31 <td>iPad Air</td> 32 <td>2000</td> 33 </tr> 34 <tr> 35 <td> 36 <input type="checkbox" /> 37 </td> 38 <td>Apple Watch</td> 39 <td>2000</td> 40 </tr> 41 42 </tbody> 43 </table> 44 <input type="button" value=" 反 选 " id="btn"> 45 </div>
CSS样式:
1 * { 2 padding: 0; 3 margin: 0; 4 } 5 6 .wrap { 7 width: 300px; 8 margin: 100px auto 0; 9 } 10 11 table { 12 border-collapse: collapse; 13 border-spacing: 0; 14 border: 1px solid #c0c0c0; 15 width: 300px; 16 } 17 18 th, 19 td { 20 border: 1px solid #d0d0d0; 21 color: #404060; 22 padding: 10px; 23 } 24 25 th { 26 background-color: #09c; 27 font: bold 16px "微软雅黑"; 28 color: #fff; 29 } 30 31 td { 32 font: 14px "微软雅黑"; 33 } 34 35 tbody tr { 36 background-color: #f0f0f0; 37 } 38 39 tbody tr:hover { 40 cursor: pointer; 41 background-color: #fafafa; 42 }
根据结构,先获取事件源
1 var j_cbAll = document.getElementById('j_cbAll'); //全选按钮 2 var j_tb = document.getElementById('j_tb'); //tbody 3 var inputs = j_tb.getElementsByTagName('input'); //tbody中的input集合
第一步,先实现全选功能,为全选按钮添加单击事件
1 j_cbAll.onclick = function() { 2 for (var i = 0; i < inputs.length; i++) { 3 if (inputs[i].type === 'checkbox') { //获取到所有复选框 4 inputs[i].checked = j_cbAll.checked; //把全选框的值赋给所有复选框 5 } 6 } 7 }
对全选功能进行完善,当有复选框没有被选中时,全选按钮也不应该被选中
所以定义一个标识,初始值记作true,当有复选框没有被选中时,把标识的值改为false,最后把标识的值赋给全选按钮
1 //先遍历拿到所有复选框 2 for (var i = 0; i < inputs.length; i++) { 3 if (inputs[i].type !== 'checkbox') { //为了便于阅读,跳过所有不是复选框的,则就获取到了所有复选框 4 continue; 5 } 6 //给复选框注册单击事件 7 inputs[i].onclick = function () { 8 var isChecked = true; //初始化标识符 9 //遍历复选框,查看所有复选框的选定状态 10 for (var i = 0; i < inputs.length; i++) { 11 if (inputs[i].type !== 'checkbox') { 12 continue; 13 } 14 if (!inputs[i].checked) { //当存在没有被选中的复选框时,改变标识符的状态 15 isChecked = false; 16 } 17 j_cbAll.checked = isChecked; 18 } 19 } 20 }
至此,全选按钮的功能已经可以正常实现
接下来完成反选按钮的部分,首先获取事件源,然后给反选按钮添加单击事件
1 var btn = document.getElementById('btn'); 2 btn.onclick = function() { 3 //遍历复选框 4 for (var i = 0; i < inputs.length; i++) { 5 if (inputs[i].type !== 'checkbox') { 6 continue; 7 } 8 inputs[i].checked = !inputs[i].checked; //将复选框的值取反赋给本身,即可完成反选 9 } 10 //还需要处理全选按钮的状态 11 var isChecked = true; 12 for (var i = 0; i < inputs.length; i++) { 13 if (inputs[i].type !== 'checkbox') { 14 continue; 15 } 16 if (!inputs[i].checked) { 17 isChecked = false; 18 } 19 j_cbAll.checked = isChecked; 20 } 21 }
到现在,所有的功能就全部可以正常实现了,但是代码中有两处判断全选按钮状态的代码完全相同,可以把它封装成一个方法
把代码整理以后就是最终的样子了
1 var btn = document.getElementById('btn'); 2 var j_cbAll = document.getElementById('j_cbAll'); 3 var j_tb = document.getElementById('j_tb'); 4 var inputs = j_tb.getElementsByTagName('input'); 5 j_cbAll.onclick = function () { 6 for (var i = 0; i < inputs.length; i++) { 7 if (inputs[i].type === 'checkbox') { 8 inputs[i].checked = j_cbAll.checked; 9 } 10 } 11 } 12 for (var i = 0; i < inputs.length; i++) { 13 if (inputs[i].type !== 'checkbox') { 14 continue; 15 } 16 inputs[i].onclick = function () { 17 checkcb(); 18 } 19 function checkcb() { //封装成方法checkcb() 20 var isChecked = true; 21 for (var i = 0; i < inputs.length; i++) { 22 if (inputs[i].type !== 'checkbox') { 23 continue; 24 } 25 if (!inputs[i].checked) { 26 isChecked = false; 27 } 28 j_cbAll.checked = isChecked; 29 } 30 } 31 } 32 btn.onclick = function () { 33 for (var i = 0; i < inputs.length; i++) { 34 if (inputs[i].type !== 'checkbox') { 35 continue; 36 } 37 inputs[i].checked = !inputs[i].checked; 38 } 39 checkcb(); 40 }
明人不说暗话,最终这个直接复制了我写好的-.-