JS学习2——DOM全选

最新推荐文章于 2022-08-09 15:57:31 发布

和谐创新

最新推荐文章于 2022-08-09 15:57:31 发布

阅读量174

点赞数

文章标签： js

本文链接：https://blog.csdn.net/hexiechuangxin/article/details/114304687

版权

本文是向DanmoSAMA的这篇文章学习

在此表示感谢。

实现方法略有不同。
我用了很蠢的方法，setInterval() 每隔一个小时间来检测四个按钮是否都选中了，如果选中，则全选按钮也选中。

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 20px;
        }

        .box {
            margin: 100px auto;
            width: 300px;
        }

        .box button {
            padding: 10px;
            text-align: center;

        }
    </style>
</head>

<body>

    <div class="box">
        <p>
            你爱好的运动是？ <input type="checkbox" name="all" id="balls">全选/全不选
        </p>
        <input type="checkbox" name="ball" id="ball1" value="足球">足球
        <input type="checkbox" name="ball" id="ball2" value="篮球">篮球
        <input type="checkbox" name="ball" id="ball3" value="羽毛球">羽毛球
        <input type="checkbox" name="ball" id="ball4" value="乒乓球">乒乓球
        <br>
        <button>全选</button>
        <button>全不选</button>
        <button>反选</button>
        <button>提交</button>
    </div>

    <script>
        let inputs = document.querySelectorAll('input');
        let buttons = document.querySelectorAll('button');

        buttons[0].onclick = function () {
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }

        buttons[1].onclick = function () {
            for (let i = 0; i < inputs.length;i++) {
                inputs[i].checked = false;
            }
        }

        buttons[2].onclick = function(){
            for(let i=1;i<inputs.length;i++){
                inputs[i].checked = !inputs[i].checked;
            }
        }

        let timer = setInterval(function(){
            inputs[0].checked=true;
            for(let i=1;i<inputs.length;i++){
                if(!inputs[i].checked){
                    inputs[0].checked=false;
                }
            }
        },100)
        
        buttons[3].onclick = function(){
            for(let i =1;i<inputs.length;i++){
                if(inputs[i].checked){
                    alert(inputs[i].value);
                }
            }
        }

    </script>

</body>

</html>

和谐创新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习2——DOM全选

本文是向DanmoSAMA的这篇文章学习在此表示感谢。实现方法略有不同。我用了很蠢的方法，setInterval() 每隔一个小时间来检测四个按钮是否都选中了，如果选中，则全选按钮也选中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫