JavaScrip实现checkbox全选、全不选、反选功能

一、全选思路：

1、全选框未选中时，点击全选所有复选框被选中；

2、在全选状态下，有一个复选框未选中，则全选按钮未选中；

3、如果普通复选框全被选中，则全选按钮被选中；

二、反选思路：

1、点击反选时，所有被选中的复选框设为未选中，所有未选中复选框设为选中；

三、要点：

1、通过checked属性判断和设置checkbox的选中状态，true为选中，false未选中；

2、通过type属性判断对象是否为复选框；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
    <p>
        <input type="checkbox" id = "all">全选&nbsp;&nbsp;
        <input type="checkbox" id="reverse">反选
    </p>
    <p><input type="checkbox" class="check">1</p>
    <p><input type="checkbox" class="check">2</p>
    <p><input type="checkbox" class="check">3</p>
    <p><input type="checkbox" class="check">4</p>
    <p><input type="checkbox" class="check">5</p>
    <p><input type="checkbox" class="check">6</p>

    <script type="text/javascript">
        window.onload = function(){
            /*
             * 通过checked属性判断和设置checkbox的选中状态，true为选中，false未选中。
             * type属性判断input标签的类型。
             */

            var all = document.getElementById("all");
            var reverse = document.getElementById("reverse");
            var oBox_group = document.getElementsByClassName("check");
            
            // 全选框点击事件
            all.onclick = function() {
                reverse.checked=false;     // 清除反选框选中状态
                // 遍历所有普通复选框
                for (var index = 0; index < oBox_group.length; index++) {
                    if (oBox_group[index].type=="checkbox") {
                        // 将普通复选框的checked值等于全选框的checked值(全选或全不选)
                        oBox_group[index].checked=all.checked;
                    }
                }
                
            }

            // 普通复选框点击事件
            for (var index = 0; index < oBox_group.length; index++) {
                // 为每个普通复选框绑定点击事件
                oBox_group[index].onclick = function() {
                    reverse.checked=false;     // 清除反选框选中状态
                    var flag = true;        // 设置标识元素
                    if (this.checked) {
                        // 循环所以得普通复选框
                        for (var index = 0; index < oBox_group.length; index++) {
                            // 判断是否存在一个复选框没有被选中，如果有则将标识flag设为true，并退出循环
                            if (oBox_group[index].type=="checkbox" && oBox_group[index].checked==false) {
                                flag = false;
                                break;
                            }
                        }
                        all.checked = flag;    // 将标识元素值赋给全选框，如果所有元素被选中，为flag = true
                    } else {
                        all.checked = false;    // 如果点击的复选框checked=false，则全选框的checked=false
                    }
                }
            }

            // 反选框点击事件
            reverse.onclick = function() {
                all.checked=false;    // 清除全选框选中状态
                // 遍历所有普通复选框
                for (var index = 0; index < oBox_group.length; index++) {
                    if (oBox_group[index].type=="checkbox") {
                        // checked=true的复选框设为false，checked=false的复选框设为true
                        oBox_group[index].checked=oBox_group[index].checked?false:true;
                    }
                }
            }

        }
    </script>
</body>
</html>

JavaScrip实现checkbox全选、全不选、反选功能

猜你喜欢