JavaScript练习—全选 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>全选练习</title>
    <script type="text/javascript ">
        window.onload = function(){
            // 获取四个多选框items
            var items = document.getElementsByName("items");

            // 为id为checkedAllBox的按钮绑定一个单击响应函数
            var checkedAllBox = document.getElementById("checkedAllBox");

            /*
                全选按钮
                    点击按钮后，四个多选框全都被选中
            */
            //1. #checkedAllBtn
            //为id为checkedAllBtn的按钮绑定一个单击响应函数
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function(){
                // alert("全都选中了~~~");
                // 遍历items
                for(var i=0 ; i<items.length ; i++)
                {
                    // 通过多选框的checked属性可以来获取或设置多选框的选中状态
                    // alert(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为checkedRevBtn的按钮绑定一个单击响应函数
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function(){
                for(var i=0 ; i<items.length ; i++){
                    //     // 判断多选框状态
                    //     if(items[i].checked){
                    //         // 设置四个多选框变成不选中状态
                    //         items[i].checked = false; 
                    //     }else{
                    //         // 设置四个多选框变成选中状态
                    //         items[i].checked = true;
                    //     }
                    // }   
                    items[i].checked = !items[i].checked;
                    checkedAllBox.checked = true;
                    if(!items[i].checked){
                        checkedAllBox.checked = false;
                    }
                }

                // 在反选时，也要判断四个多选框是否全部选中
            }

            /*
                提交按钮
                    点击按钮后，将所有选中的多选框的value属性值弹出
            */
            //4. #sendBtn
            // 为id为sendBtn的按钮绑定一个单击响应函数
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function(){
                for(var i=0 ; i<items.length ; i++){
                    // 判断多选框是否选中
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }
            }

            //5. #checkedAllBox
            /*
                全选/全不选多选框
                    当它选中时其余的也选中，当它取消时其余的也取消
                在事件的相应函数中，响应函数是给谁绑定的，this就是谁的
            */
            checkedAllBox.onclick = function(){
                for(var i=0 ; i<items.length ; i++){
                    items[i].checked = this.checked;
                }
            }

            //6. items
            /*
                如果四个多选框全都选中，则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设置为没选中状态
                            checkedAllBox.checked = false;
                            break;
                        }
                    }

                }
            }
        }
    </script>
</head>

<body>
    <form method="post" action="">
        你爱好的运动是? <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>

 

posted @ 2020-07-30 10:46  我等着你  阅读(220)  评论(0)    收藏  举报