js基础-全选练习

不闻钟-nnnn

于 2022-05-16 15:19:06 发布

阅读量104

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45247439/article/details/124800522

版权

这是一个使用JavaScript编写的网页，实现了全选、全不选、反选和提交功能。当用户点击全选按钮时，所有选项被选中；全不选则取消所有选项的选择；反选会反转当前选中状态；提交按钮则显示已选中的选项值。此外，全选/全不选按钮的状态会根据选项选择情况自动更新，并且如果所有选项未全选，全选/全不选按钮不会被选中。

摘要由CSDN通过智能技术生成

<!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 cab = document.getElementById("CheckedAllBox");
            var items = document.getElementsByName("items");


            //1.功能描述，点击全选后，四项运动全部选中
            var all = document.getElementById("All");
            all.onclick = function(){
                // 获取四项运动多选框
                var items = document.getElementsByName("items");
                for(var i=0; i<items.length; i++){
                    //全选中
                    items[i].checked = true;
                }
                cab.checked = true;
            };

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


            // 3.点击反选按钮，选中的变成没选的，没选的变成选的
            var rev = document.getElementById("Rev");
            rev.onclick = function(){
                cab.checked = true;
                var items = document.getElementsByName("items");
                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;
                    if(!items[i].checked){
                        cab.checked = false;
                    }
                }

            };

            //4.提交,弹出value属性值
            var sub = document.getElementById("Submit");
            sub.onclick = function(){
                var items = document.getElementsByName("items");
                for(var i=0; i<items.length; i++){
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                    
                }

            };

            //5.点击全选/全不选框，四个选项框出现想要的结果
            var cab = document.getElementById("CheckedAllBox");
            cab.onclick = function(){
                var items = document.getElementsByName("items");
                // alert(this == cab);true
                for(var i=0; i<items.length; i++){
                    items[i].checked = this.checked;
                    
                }
            };

            //6.如果四个全选框没有全选中，那么全选/全不选框 也不能是选中状态
            // 1.给四个多选框绑定单击响应函数
            var items = document.getElementsByName("items");
            for(var i=0; i<items.length; i++){
                items[i].onclick = function(){
                    cab.checked = true;
                    for(var j=0; j<items.length; j++){
                        if(!items[j].checked){
                            cab.checked = false;
                            break;
                        }
                    }
                };
            }

        };
        

    </script>
</head>
<body>
    <form action="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="All" value="全 选">
        <input type="button" id="No" value="全不选">
        <input type="button" id="Rev" value="反 选">
        <input type="button" id="Submit" value="提交">
        
    </form>
</body>
</html>