DOM全选练习

最新推荐文章于 2022-08-09 15:57:31 发布

CV键都碎了

最新推荐文章于 2022-08-09 15:57:31 发布

阅读量132

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/sinat_33940108/article/details/116160313

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本页面完成全选/全不选，反选按钮。

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        window.onload = function(){
       
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            //获取四个多选框的items
            var item = document.getElementsByName("items");
             //全选按钮
            checkedAllBtn.onclick = function(){
                    for(var i = 0;i<item.length;i++){
                        item[i].checked = true;
                    }
                   //将全选/全不选设置为选中
                   checkedAllBox.checked = true;
                }
            //全不选按钮
                var checkedNoBtn = document.getElementById("checkedNoBtn");
                checkedNoBtn.onclick = function(){
                    for(var i = 0;i<item.length;i++){
                        item[i].checked = false;
                    }
                   //将全选/全不选设置为不选中
                   checkedAllBox.checked = false;
                }
			//反选按钮
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function(){
                //将checkAllBox设置为选中状态
                checkedAllBox.checked = true
                for(var i = 0;i<item.length;i++){
                    // if(item[i].checked){
                    //     item[i].checked = false;
                    // }else{
                    //     item[i].checked = true;
                    // }
                    item[i].checked = !item[i].checked;
                    //在反选时也需要判断四个多选框是否全都选中 
                        //判断四个多选框是否全选
                        //只要有一个没选中则i就不是全选
                    if(!item[i].checked){
                            checkedAllBox.checked = false;
                            }
                }              
            }
            //提交按钮
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function(){
                for(var i = 0;i<item.length;i++){
                    if(item[i].checked){
                        alert(item[i].value);
                    }
                }
            }
            //5. 全选/全不选框
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick = function(){
                    
                //设置多选框选中状态
                for(var i=0;i<item.length;i++){
                        item[i].checked = this.checked;
                }
            }

            //6.items
            /*
             如果四个多选框全都选中，则checkedAllBox也应该选中
             如果四个多选框都选中，则checkedAllBox也不应该选中
            */
            //为四个多选框分别绑定点击响应函数
            for(var i=0;i<item.length;i++){        
                item[i].onclick = function(){
                    for(var j=0;j<item.length;j++){
                        checkedAllBox.checked = true
                        //判断四个多选框是否全选
                        //只要有一个没选中则就不是全选
                        if(!item[j].checked){
                            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>

总结：
onload() 先加载界面。
全选按钮：循环全部复选框，checked赋值为true。最后将全选/全不选框赋值为true。
全不选按钮：循环全部复选框，checked赋值为false。最后将全选/全不选赋框值为false。
反选按钮： item[i].checked = !item[i].checked; 循环直接赋值为反布尔属性。
5全选/全不选框： this指向全选/全不选框，把全选/全不选框checked全部赋值给其他复选框。
6items：分别绑定点击函数。默认将全选全不选框设置为选中，然后进行判断，如果有选框未选中，就赋值未false。

CV键都碎了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM全选练习

本页面完成全选/全不选，反选按钮。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫

专栏目录