多选框全选练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    // onload事件在整个页面加载完执行
        window.onload=function(){

            // 获取四个多选框items (全局定义)
            var items = document.getElementsByName("items");
            // 获取全选/全不选的多选框
            var checkedAllBox = document.getElementById("checkedAllBox");

// ---------------------------------------全选中事件-------------------------------------------------------------

            // 1.checkedAllBtn
            // 为id为checkedAllBtn的按钮绑定一个单击响应函数
            var checkedAllBtn=document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick=function(){
                // 遍历items
                for(var i=0;i<items.length;i++){

                    // 通过多选框的checked属性可以来获取或设置多选框的选中状态
                    // console.log(items[i].checked);
                    // 设置四个多选框变成选中状态
                    items[i].checked=true;
                    checkedAllBox.checked=true;
                }

            };


// ---------------------------------------全不选事件-------------------------------------------------------------

            // 2.checkedNoBtn
            //为id为checkedNoBtn的按钮绑定一个单击响应函数
            var checkedNoBtn=document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick=function(){
                for(var i=0;i<items.length;i++){
                    //将四个多选框设置为没选中的状态
                    items[i].checked=false;
                }
                // 将全选/全不选设置为不选中
                checkedAllBox.checked=false;
            };


// ---------------------------------------反选事件-------------------------------------------------------------

            // 3.checkedRevBtn
            //为id为checkedNoBtn的按钮绑定一个单击响应函数
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick=function(){ 
                checkedAllBox.checked = true;
                for(var i=0;i<items.length;i++){
                    
                    // 将checkAllBox设置为选中状态
                   

                //第一种方法：判断多选框状态
                   /*  if(items[i].checked){
                        items[i].checked=false;
                    }else{
                        // 证明多选框没选中，则设置为选中状态
                        items[i].checked=true;
                    } */

                //第二种方法： 
                    items[i].checked=!items[i].checked;
                    //判断四个多选框是否全选
                    // 只要有一个没选中则就不是全选

                    if (!items[i].checked) {
                        checkedAllBox.checked = false;
                      
                        
                    }
                }

                // 在反选时也需要判断四个多选框是否全都选中




            };



// --------------------------------------提交按钮事件-------------------------------------------------------------

            // 4.sendBtn
            //为id为sendBtn的按钮绑定一个单击响应函数
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function () {
                for(var i=0;i<items.length;i++){
                    // 判断多选框是否被选中
                    if(items[i].checked){
                        console.log(items[i].value);
                        }
                    
                }
            };

// --------------------------------------全选/全不选事件----------------------------------------------------------

            // 5.checkedAllBox

            /* 全选/全不选 多选框
                -当它选中时，其余的也选中，当它取消时其余也取消

                在事件的响应函数中，响应函数是给谁绑定的this就是谁的
             */
            //为id为checkedAllBox的按钮绑定一个单击响应函数
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick = function () {
                
                // console.log(this===checkedAllBox); 

                // 设置多选框的选中状态
                for (var i = 0; i < items.length; i++) {
                    items[i].checked=checkedAllBox.checked;

            }
            };

// --------------------------------------items事件----------------------------------------------------------

            // 6.items
            // var checkedAllBox = document.getElementById("checkedAllBox");
            /* 
            如果四个多选框全都选中，则checkAllBox也应该选中
            如果四个多选框没豆选中，则checkAllBox也不应该选中
             */

            //  为四个多选框分别绑定点击响应函数
            for(var i=0;i<items.length;i++){
                items[i].onclick=function(){
                    //将checkedAllBox设置为选中状态
                   checkedAllBox.checked=true;



                for(var j=0;j<items.length;j++){
                     //判断四个多选框是否全选
                    // 只要有一个没选中则就不是全选

                    if(!items[j].checked){
                        checkedAllBox.checked=false;
                        // 一旦进入判断，则已经得出接轨们不用再继续执行循环
                        break;
                    }
                }    
                   
                }
            }

        };

    </script>
</head>
<body>
    <form action="" method="post">
        你爱好的运动是？<input type="checkbox"  id="checkedAllBox"/>全选/全不选
        <br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="排球"/>排球
        <br/>
        <input type="button" id="checkedAllBtn" value="全 选"/>
        <input type="button" id="checkedNoBtn" value="全不选"/>
        <input type="button" id="checkedRevBtn" value="反选"/>
        <input type="button" id="sendBtn" value="提交"/>


    </form>
</body>
</html>