js全选全不选反选

原创已于 2022-08-09 11:43:07 修改 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #android studio

于 2022-03-25 15:45:27 首次发布

js 专栏收录该内容

5 篇文章

订阅专栏

<!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>
</head>

<body>

    <h1> 请选择您的英雄 </h1>

    <div>
        <input type="checkbox"> 吕布<br>
        <input type="checkbox"> 貂蝉<br>
        <input type="checkbox"> 雅典娜<br>
        <input type="checkbox"> 鲁班<br>
        <input type="checkbox"> 赵云<br>
    </div>

    <button onclick="selectall()">全选</button>
    <button onclick="allDontchoose()">全不选</button>
    <button onclick="reverseCheck()">反选</button>

    <script>

        function selectall() {
            var inputs = document.getElementsByTagName("input"); //checked 
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }

        function allDontchoose() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = false;
            }
        }

        function reverseCheck() {
                var inputs = document.getElementsByTagName("input");
                for(var i = 0; i < inputs.length; i++) {
                    if(inputs[i].checked == true) {
                        inputs[i].checked = false;
                    } else {
                        inputs[i].checked = true;
                    }
                }
            }
    </script>
</body>

</html>