前端全选练习：JavaScript实现多选与联动-CSDN博客

本文介绍了一个使用JavaScript实现的网页练习，用户可以全选或取消选择多个运动选项，操作会联动控制'全选/不选'按钮。通过click事件处理函数，展示了如何控制复选框的选中状态并保持一致性。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选练习</title>
    <script type="text/javascript">
        function myClick(btn,fun){
            var btn = document.getElementById(btn);
            btn.onclick = fun;
        };
        window.onload = function(){
            var items = document.getElementsByName("items");
            var checkBtn = document.getElementById("check");
            for(var i=0;i<items.length;i++){
                items[i].onclick = function(){
                    checkBtn.checked = true;
                    for(var j=0;j<items.length;j++){
                        if(!items[j].checked){
                            checkBtn.checked = false;
                            break;
                        }
                    }
                }
            }
            //全选/不选
            myClick("check",function(){
                for(var i=0;i<items.length;i++){
                    items[i].checked = this.checked;
                }
            });
            //全选
            myClick("checkAll",function(){
                for(var i=0;i<items.length;i++){
                    items[i].checked = true;
                }
                //与全选/不选关联
                checkBtn.checked = true;
            });
            
            //全部选
            myClick("checkNo",function(){
                for(var i=0;i<items.length;i++){
                    items[i].checked = false;
                }
                //与全选/不选关联
                checkBtn.checked = false;
            });
            //反选
            myClick("checkRev",function(){                
                for(var i=0;i<items.length;i++){
                    items[i].checked = !items[i].checked
                    //与全选/不选关联
                    checkBtn.checked = true;
                    if(!items[i].checked)
                        checkBtn.checked = false;
                }
            });
            
            //提交
            myClick("submit",function(){
                for(var i=0;i<items.length;i++){
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }
            });
            
            
        }
    </script>
</head>

<body>
    <h4>你最喜欢的运动是?</h4>
    <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><br>
    <input type="checkbox" id="check" />全选/不选<br><br>
    <button id="checkAll">全选</button>
    <button id="checkNo">全不选</button>
    <button id="checkRev">反选</button>
    <button id="submit">提交</button>
</body>

</html>

选择练习