javascript——实现全选（包括子复选框选中，全选框也选中）、全不选、反选等效果

本文链接：https://blog.csdn.net/longmo8/article/details/107061920

```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框选中按钮</title>
    <style>
        tr, td {
            text-align: center;
        }
    </style>
</head>
<body>
<div align="center">

    <table border="1px" cellspacing="0">
        <tr>
            <td><input type="checkbox" id="chkall" onclick="chk_all()">全选 <br></td>
            <td>产品名称</td>
            <td>价格（元）</td>
            <td>数量</td>
        </tr>

        <tr>
            <td><input type="checkbox" name="chk" onclick="chk()"> <br></td>
            <td>刘亦菲时尚芭莎杂志</td>
            <td>25</td>
            <td>6</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk" onclick="chk()"> <br></td>
            <td>刘亦菲明信片</td>
            <td>20</td>
            <td>7</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk" onclick="chk()"> <br></td>
            <td>刘亦菲唱片</td>
            <td>52</td>
            <td>8</td>
        </tr>

    </table>
    <button id="del" onclick="chk_no()">删除选中的产品(全不选)</button>
    <button id="unchk" onclick="unchk()">反选</button>
</div>
<script>
    function chk_all() {
        //通过全选钮的状态控制下边三个复选框的选择
        var status = document.getElementById("chkall").checked; //代表当前选中状态，true代表当前选中
        var arrChk = document.getElementsByName("chk");

        if (status) {
            for (var i = 0; i < arrChk.length; i++) {
                arrChk[i].checked = true;
            }
        } else {
            for (var i = 0; i < arrChk.length; i++) {
                arrChk[i].checked = false;
            }
        }
    }

    //取消选中的（全不选）
    function chk_no() {
        //返回的是数组
        var arrChk = document.getElementsByName("chk");

        for (var i = 0; i < arrChk.length; i++) {
            arrChk[i].checked = false;
        }
        document.getElementById("chkall").checked = false;
    }

    //反选
    function unchk() {
        var arrChk = document.getElementsByName("chk");

        var times =0;
        for (var i = 0; i < arrChk.length; i++) {
            if (arrChk[i].checked) {
                arrChk[i].checked = false;

            } else {
                arrChk[i].checked = true;
                times++;
            }

            if(times==arrChk.length){
                document.getElementById("chkall").checked=true;
            }else {
                document.getElementById("chkall").checked=false;
            }
        }


    }

    //子复选框全部选中，全选框也自动选中
    function chk() {
        var arrChk = document.getElementsByName("chk");
        var times = 0;
        for (var i = 0; i < arrChk.length; i++) {
            if (arrChk[i].checked) {
                times++;
            }
        }
        if (times == arrChk.length) {
           /* status=true; 是给status赋值，并没有改变标签*/
            document.getElementById("chkall").checked = true;
        } else {
            document.getElementById("chkall").checked = false;
        }
        //如果有一个没有选，全选框也不选
        if (times == 0) {
            document.getElementById("chkall").checked = false;
        }
    }
</script>

</body>
</html>