全反选框JavaScript实现

最新推荐文章于 2023-07-07 16:55:54 发布

grapefruiit

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量88

点赞数

分类专栏： Web前端文章标签： html5 javascript 算法

本文链接：https://blog.csdn.net/m0_56252710/article/details/124213268

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述


```html

```html
<!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>

    <p><input type="checkbox" name="" id="">1</p>
    <p><input type="checkbox" name="" id="">2</p>
    <p><input type="checkbox" name="" id="">3</p>
    <p><input type="checkbox" name="" id="">4</p>
    <p><input type="checkbox" name="" id="">5</p>
    <p><input type="checkbox" name="" id="">6</p>
    <button onclick="getAll(0)">全选</button>
    <button onclick="getAll(1)">全不选</button>
    <button onclick="getAll(2)">反选</button>


    <script>
        // 封装函数，全反选框的选定可以通过cheched属性来决定，当checked=true时为选中
        // 当chhecked=falss时为非选中。
        let input = document.getElementsByTagName('input');
        //单击按钮就触发这个函数.
        function getAll(num) {

            // 这里是使用一个循环,判断点击的是哪个button.
            for (let i = 0; i < input.length; i++) {
                if (num == 0) {
                    input[i].checked = true;
                }
                if (num == 1) {
                    input[i].checked = false;
                }
                // 反选就是让checked的值取反。
                if (num == 2) {
                    input[i].checked = !input[i].checked;
                }
            }
        }
    </script>
</body>

</html>