javascript 复选框（checkbox）全选/全不选/反选

其实很简单，先分析一下
效果分析：
　　1，点击全选/全不选
　　　全选文字变成全不选，同时全选按钮和所有按钮选中状态，否则，则相反
　　2，点击反选按钮
　　　没有选中的按钮变成选中状态，选中的按钮变成未选中
　　　
实现方式：
　1，点击全选复选框
　　判断点击的按钮是否为选中状态this.checked = true/false;
　　　true：设置所有复选框为选中状态
　　　false：设置所有复选框为未选中状态
　　　根据为true/false改变点击按钮的文字
　2，点击反选
　　对所有复选框进行遍历，判断每一个复选框是否是选中状态input[i].checked = true/false;
　　　true：设置选中状态的为未选中状态
　　　false：设置未选中状态的为选中状态
　
　在这里插入图片描述


<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复选框（checkbox）全选/全不选/反选</title>
    <style>
        dl {
            width: 300px;
            margin: 30px auto;
        }

        dd {
            margin: 10px;
        }
    </style>
</head>

<body>
    <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
    <dl>
        <dt>
            <label for="checkall"> <input type="checkbox" id="checkall"><span>全选</span></label>
            <label for="invertcheckall"> <input type="checkbox" id="invertcheckall">反选</label>
        </dt>
        <dd><input type="checkbox" class="item">选项（1） </dd>
        <dd><input type="checkbox" class="item">选项（2） </dd>
        <dd><input type="checkbox" class="item">选项（3） </dd>
        <dd><input type="checkbox" class="item">选项（4） </dd>
        <dd><input type="checkbox" class="item">选项（5） </dd>
        <dd><input type="checkbox" class="item">选项（6） </dd>
        <dd><input type="checkbox" class="item">选项（7） </dd>
        <dd><input type="checkbox" class="item">选项（8） </dd>
        <dd><input type="checkbox" class="item">选项（9） </dd>
    </dl>
    <script type="text/javascript">
        var all = document.getElementById('checkall');
        var invertBtn = document.getElementById('invertcheckall');
        var input = document.querySelectorAll('.item');
        var select = document.querySelector('span');

        // 全选
        function selectAll() {
            for (var i = 0; i < input.length; i++) {
                input[i].checked = true;
            }
        }
        // 全不选
        function notSelectAll() {
            for (var i = 0; i < input.length; i++) {
                input[i].checked = false;
            }
        }
        // 反选
        function invertCheck() {
            for (var i = 0; i < input.length; i++) {
                if (input[i].checked == false) {
                    input[i].checked = true;
                } else {
                    input[i].checked = false;
                }
            }
        }

        // 点击全选后，文字变成全不选，同时全部复选框选中，以此反复
        all.addEventListener('click', function () {
            all.checked == false ? select.innerHTML = "全选" : select.innerHTML = "全不选";
            if (all.checked == true) {
                selectAll()
            } else {
                notSelectAll()
            }
        })
        // 反选，即点击后原本没有选中选中，选中的取消选中
        invertBtn.addEventListener('click', function () {
            invertCheck()
        })
    </script>

</body>

</html>