全选和反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <div class="wrap">
      <table>
          <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>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>

          </tbody>
      </table>
      <input type="button" value="  反 选  " id="btn">


      <script>
          var j_cbAll = document.getElementById('j_cbAll');
          var j_tb = document.getElementById('j_tb');
          var inputs = j_tb.getElementsByTagName('input');
          var btn = document.getElementById('btn');

// 给全选注册事件，子选项状态 = 总状态
           j_cbAll.onclick = function() {
                //获取所有子选项
                for(var i = 0; i < inputs.length; i++) {
                    var input = inputs[i];
                    // 过滤掉不是复选框的input
                    if(input.type !== 'checkbox') {
                        continue;
                    }
                    // 使子选项的状态 = 总选项的状态
                    input.checked = this.checked;
                }
           }
// 给反选按钮注册事件  子选项状态 = ！子选项状态
            btn.onclick = function() {
                for(var i = 0; i < inputs.length; i++) {
                    var input = inputs[i];
                    if(input.type !== 'checkbox') {
                        continue;
                    }
                    input.checked = !input.checked;
                }
                checkAll();
            }
// 封装总选项状态函数
            function checkAll() {
                var isChecked = true;
                for(var i = 0; i < inputs.length; i++) {
                    var input = inputs[i];
                    if(input.type !== 'checkbox') {
                        continue;
                    }

                    if(!input.checked) {
                        isChecked = false;
                    }
                }

                j_cbAll.checked = isChecked;

            }
// 点击子选项判断总选项的状态
            for(var i = 0; i < inputs.length; i++) {
                var input = inputs[i];

                input.onclick = function() {
                    checkAll();
                }
            }
          
      </script>
  </div>
</body>
</html>
猜你喜欢
