javascript——实现全选(包括子复选框选中,全选框也选中)、全不选、反选等效果

```<!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>

你可能感兴趣的:(javascript)