js--checked的全选，反选，点击子的checkbox改变父的checkbox状态

下面是我通过学习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状态

猜你喜欢

js--checked的全选，反选，点击子的checkbox改变父的checkbox状态