全选练习

周白卿

于 2022-07-16 17:44:04 发布

阅读量103

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_51088023/article/details/125822901

版权

JavaScript学习笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var items = document.getElementsByName("items");
            //获取四个多选框

            /*--------------全选/全不选按钮-------------------------------------*/
            var checkedAllBox = document.getElementById("checkedAllBox");
            //获取全选/全不选元素
            //为checkedAllBox元素绑定单击响应函数
            checkedAllBox.onclick = function(){
                for(var i=0;i<items.length;i++){
                    //设置多选框的状态
                    items[i].checked = this.checked;
                    //在事件的响应函数中，响应函数是给谁绑定的，this就是谁
                }
            };
            /*
             *如果四个多选框都选中，checkedAllBox应该也选中
             *如果四个多选框都未选中，checkedAllBox应该也未选中
             */
            //为四个多选框分别绑定单击响应函数
            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;
                        }
                    }
                }
            }

            /*---------------全选按钮------------------------------------------*/
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            //获取checkedAllBtn按钮元素
            //为checkedAllBtn元素绑定单击响应函数
            checkedAllBtn.onclick = function(){
                for(var i=0;i<items.length;i++){
                    //将四个多选框设置为选中状态
                    items[i].checked = true;
                }
                //将全选/全不选按钮设置为选中状态
                checkedAllBox.checked = true;
            }

            /*---------------全不选按钮----------------------------------------*/
            var checkedNoBtn = document.getElementById("checkedNoBtn");
            //获取checkedNoBtn按钮元素
            //为checkedNOBtn元素绑定单击响应函数
            checkedNoBtn.onclick = function(){
                for(var i=0;i<items.length;i++){
                    //将四个多选框设置为未选中状态
                    items[i].checked = false;
                } 
                //将全选/全不选按钮设置为未选中状态
                checkedAllBox.checked = false;
            }

            /*---------------反选按钮-----------------------------------------*/
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            //获取checkedRevBtn按钮元素
            //为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应该也选中
                *如果四个多选框都未选中，checkedAllBox应该也未选中
                */
                    checkedAllBox.checked = true;
                    //判断四个多选框是否全选
                    for(var j=0;j<items.length;j++){
                        //只要有一个未选中，就不是全选
                        if(!items[j].checked){
                            //将checkedAllBox设置为未选中
                            checkedAllBox.checked = false;
                        }
                    }                       
            }

            /*---------------提交按钮-----------------------------------------*/
            var sendBtn = document.getElementById("sendBtn");
            //获取sendBtn按钮元素
            //为sendBtn元素绑定单击响应函数
            sendBtn.onclick = function(){
                for(var i=0;i<items.length;i++){
                    //判断多选框状态
                    if(items[i].checked){
                        //证明多选框已选中，则弹出值
                        alert(items[i].value); 
                    }
                }   
            }
        };
    </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>