当前位置：网站首页>JS学习笔记17：DOM查询练习

JS学习笔记17：DOM查询练习

2022-07-19 12:26:00 【那人独钓寒江雪.】 

<!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 () {
    
            //全选按钮 点击按钮后 四个多选框全部被选中
            //1.#checkedAllBtn 为这个按钮绑定一个单击响应函数
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function () {
    
                //获取四个多选框的items
                var items = document.getElementsByName("items");

                //遍历items
                for (var i = 0; i < items.length; i++) {
    
                    //设置四个多选框变成选中状态
                    items[i].checked = true;
                }
            };

            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function () {
    
                var items = document.getElementsByName("items");
                for (var i = 0; i < items.length; i++) {
    
                    items[i].checked = false;
                }
            };

            //反选功能实现
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function () {
    
                var items = document.getElementsByName("items");

                for (var i = 0; i < items.length; i++) {
    
                    if (items[i].checked=true){
    
                        items[i].checked!=items[i].checked;
                    };    
                }
            }
            //提交按钮
           
            var sendBtn=document.getElementById("sendBtn");
            sendBtn.οnclick=function(){
    
                var items=document.getElementsByName("items");
                for (var i=0;i<items.length;i++){
    
                    if (items[i].checked=true){
    
                        alert("该用户已提交数据")
                            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" name="" id="checkedAllBtn" value="全 选" />
        <input type="button" name="" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反 选" />
        <input type="button" name="" id="sendBtn" value="提 交">
    </form>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

原网站

版权声明
本文为[那人独钓寒江雪.]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_62491934/article/details/125854610

边栏推荐

猜你喜欢

随机推荐