js#css#html 简易全选选择框（锻炼逻辑思维）_js和html制作多选框 csdn-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41306215/article/details/105447007

这篇博客介绍了如何用JavaScript、CSS和HTML创建一个简单的全选选择框功能，强调通过实践这种小项目可以提升逻辑思维能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta id="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
    <script>
        window.onload=function(){
            //获取四个多选
            var items=document.getElementsByName("items");
            //获取全选/全不选 多选框
            var checkedAllBox=document.getElementById("checkedAllBox");


            //1.checkedAllBtn
                var checkedAllBtn=document.getElementById("checkedAllBtn");
                checkedAllBtn.onclick=function(){
                    for(var i=0;i<items.length;i++)
                    {
                        items[i].checked=true;
                    }
                    checkedAllBox.checked=true;
                };

            //2.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
            var checkedRevBtn=document.getElementById("checkedRevBtn");
                checkedRevBtn.onclick=function(){
                    ///将checkedAllBox设置成选中状态
                    checkedAllBox.checked=true;

                    for(var i=0;i<items.length;i++)
                    {
                        items[i].checked =! items[i].checked;
                        
                         //反选时也要判断四个多选框是否全部选中 
                        if(!items[i].checked){
                            checkedAllBox.checked=false;
                        }
                    }
                    }
                   
                };
            //4.sendBtn
            var sendBtn=document.getElementById("sendBtn");
            sendBtn.onclick=function(){
                    for(var i=0;i<items.length;i++)
                    {
                        if(items[i].checked)
                        alert("You have choose: "+items[i].value);
                    }
                };
            //5.checkedAllBox
            checkedAllBox.onclick=function(){ 
                    for(var i=0;i<items.length;i++)
                    {
                        items[i].checked=checkedAllBox.checked;

                    }
                };
            //6.items
            
            for(var i=0;i<items.length;i++){
                items[i].onclick=function(){
                    //将初始checkedAllBox设置为选中状态
                    //点击其中一个立即进入true状态，但再根据后面的循环判断是true还是false
                    checkedAllBox.checked=true;
                    for(var j=0;j<items.length;j++){
                        if(!items[j].checked){
                            checkedAllBox.checked=false;
                            //一旦进入判断，则已经得出结果，不用再循环
                        }
                    }
                };
            }
            
        };
    </script>
</head>
<body>
    <form method="POST">
    <p>你爱好的运动是？</p>
    <input type="checkbox" id="checkedAllBox">Select all / select none
    <ul>
        <li>
            <input type="checkbox" id="pp" name="items" value="PingPong">PingPong
        </li>
        <li>
            <input type="checkbox" id="fb" name="items" value="Football">Football
        </li>
        <li>
            <input type="checkbox" id="bb" name="items" value="Basketball">Basketball
        </li>
        <li>
            <input type="checkbox" id="bt" name="items" value="Baminton">Baminton
        </li>
    </ul>
    
    
    <button type="button" id="checkedAllBtn">全选</button>
    <button type="button" id="checkedNoBtn">全不选</button>
    <button type="button" id="checkedRevBtn">反选</button>
    <button type="submit" id="sendBtn">提交</button>
</form>
</body>

</html>

没想到几个小小的键，触及的代码这么多，而且逻辑思维要比较强，时不时练一下这个代码，可以锻炼一下思维