全选练习

1、运行结果展示

2、完整代码

<!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>全选练习</title>
    <script>
        window.onload = function(){
            
            //全选
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function(){
                var items = document.getElementsByName("items");
                for(var i=0;i<items.length;i++){
                    items[i].checked = true;
                }
                document.getElementById("checkedAllBox").checked=true;
            }

            //全不选
            var checkedNotBtn = document.getElementById("checkedNotBtn");
            checkedNotBtn.onclick = function(){
                var items = document.getElementsByName("items");
                for(var i=0;i<items.length;i++){
                    items[i].checked = false;
                }
                document.getElementById("checkedAllBox").checked=false;
            }

            //反选
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function(){
                var items = document.getElementsByName("items");
                var flag = true;
                for(var i=0;i<items.length;i++){
                    if(items[i].checked==true){
                        items[i].checked = false;
                        flag = false;
                    }else{
                        items[i].checked = true;
                    }
                    if(flag){
                        document.getElementById("checkedAllBox").checked = true;
                    }else{
                        document.getElementById("checkedAllBox").checked = false;
                    }
                    
                }
            }

            //提交
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function(){
                var items = document.getElementsByName("items");
                for(var i=0;i<items.length;i++){
                    if(items[i].checked == true){
                        alert(items[i].value);
                    }
                }
                
            }

            //全选
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick = function(){
                var items = document.getElementsByName("items");
                for(var i=0;i<items.length;i++){
                    if(checkedAllBox.checked){
                        items[i].checked=true;
                    }else{
                        items[i].checked=false;
                    }
                }
            }

            //全选
            var items = document.getElementsByName("items");
            for(var i = 0;i<items.length;i++){
                items[i].onclick = function(){
                    var checkedAllBox = document.getElementById("checkedAllBox");
                    checkedAllBox.checked=true;
                    for(var j=0;j<items.length;j++){
                        if(!items[j].checked){
                            checkedAllBox.checked=false;
                        }
                    }
                }
            }


        }
    </script>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" name="" 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="checkedNotBtn" value="全不选">
        <input type="button" id="checkedRevBtn" value="反选">
        <input type="button" id="sendBtn" value="提交">
    </form>
</body>
</html>
d=“checkedRevBtn” value=“反选”>
\
```
HTML全选练习

全选练习

1、运行结果展示

2、完整代码
