标签：color checked onclick div type 改变 length init NPU
下面是我通过学习js基础利用js简单的实现了一个小的案例包含具体的思路和代码，这里的表格没有写css样式美化。
点击父的checkbox时呈现的状态
当子的checkbox没有全部选中时，父的checkbox也改变了相应的状态
点击反选之后呈现的状态
具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .gray { color: gray; } </style> </head> <body> <div class="warp"> <table border="1"> <thead> <tr> <th><input type="checkbox" id="j_cbAll" /></th> <th>商品</th> <th>价钱</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad pro</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPhone11</td> <td>10000</td> </tr> </tbody> </table> <input type="button" value="反选" id="btn"> </div> <script src="common.js"></script> <script> // 1 点击全选按钮（父的checkbox）的时候，让子的checkbox的选中状态跟父的checkbox保持一致 //1.1 获取父checkbox注册点击事件 var j_cbAll = my$(‘j_cbAll‘); var checkboxs = document.querySelectorAll(‘#j_tb input[type=checkbox]‘); j_cbAll.onclick = function () { //2.2 让子的checkbox的选中状态跟父的checkbox保持一致 //获取所有子的checkbox var i = 0, len=checkboxs.length; for (; i<len; i++) { //获取每一个checkbox var checkbox = checkboxs[i]; //让每一个checkbox的选中状态和父的checkbox保持一致 checkbox.checked = this.checked; } } // 2 给所有子checkbox注册点击事件，点击子checkbox修改父的checkbox 如果有一个子的checkbox没有选中，父的checkbox也不能选中 // 2.1 给所有的checkbox注册点击事件 var i = 0, len=checkboxs.length; for (; i<len; i++) { var checkbox =checkboxs[i]; //注册点击事件 checkbox.onclick = function () { //2.2 如果有一个子checkbox没有选中，父的checkbox也选不中 // 假设，所有子的checkbox都选中了 var isAllCheked = true; for (i = 0; i<len; i++) { //获取每一个子的checkbox checkbox = checkboxs[i]; //判断选中状态 if(!checkbox.checked) { //如果checkbox没有选中 设置isAllChecked = false isAllCheked = false; break; } } // 设置父的checkbox的选中状态 j_cbAll.checked = isAllCheked; } } // 3 反选 // 3.1 给反选按钮注册点击事件 my$(‘btn‘).onclick = function () { // 3.2 给所有子的checkbox 对选中状态进行反选 for(i = 0; i<len; i++) { var checkbox = checkboxs[i]; //反选 checkbox.checked = !checkbox.checked; } } </script> </body> </html>
js--checked的全选，反选 ，点击子的checkbox改变父的checkbox状态
标签：color checked onclick div type 改变 length init NPU
原文地址：https://www.cnblogs.com/awjbky/p/12169825.html
