表格全选和取消全选功能实现

1.创建HTML表格`

`

            <td><input type="checkbox" class="th_b"></td>
            <td align="center">代码</td>
            <td align="center">代码</td>
            <td align="center">代码</td>

            <td align="center">代码</td>




        </thead>


        <tbody>
            <tr>
                <td><input type="checkbox" class="tb_b"></td>
                <td align="center">15555</td>
                <td align="center">15555</td>
                <td align="center">15555</td>
                <td align="center">15555</td>

            </tr>
            <tr>
                <td><input type="checkbox" class="tb_b"></td>
                <td align="center">15555</td>
                <td align="center">15555</td>
                <td align="center">15555</td>
                <td align="center">15555</td>

            </tr>

        </tbody>

    </table>

2.取得HTML元素

 var ips = document.querySelectorAll('.tb_b');//取得表内子选框
 var tb = document.querySelector('.th_b');//取得表头全选

3.全选控制实现

tb.onclick = function() {
      for (let i = 0; i < ips.length; i++) {
         ips[i].checked = this.checked;//实现全选控制，让子选框跟随全选按钮进行变化//


            }
        }

4.子选框控制全选按钮实现

for (let i = 0; i < ips.length; i++) {
            ips[i].onclick = function() {//创建点击事件
                var flag = true; 定义全选控制变量  
                for (let i = 0; i < ips.length; i++) {//对子选框遍历
                    if (!ips[i].checked) {//如果某一个没有被勾选时执行
                        flag = false;

                        break;
                    }
                }

                tb.checked = flag;//全选checked属性跟随flag变化
            }
        }