全选取消反选

深处莫神

发布于 2022-8-9 22:24

浏览

0收藏

全选取消反选-鸿蒙开发者社区

全选取消反选按钮触发事件

1、for…in :遍历Array时，拿到的是每个元素索引
for…of:遍历的是对象的属性所对应的值
2、input 有默认的checked属性值，选中时checked=true 未选中时为false

<!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>
    <input type="checkbox" name="love">爱好1 <br />
    <input type="checkbox" name="love">爱好2 <br />
    <input type="checkbox" name="love">爱好3 <br />
    <input type="checkbox" name="love">爱好4 <br />
    <input type="checkbox" name="love">爱好5 <br />
    <button id="all">全选</button>
    <button id="cancel">取消</button>
    <button id="reverse">反选</button>
</body>

</html>
<script>
    var all = document.getElementById('all')
    var cancel = document.getElementById('cancel')
    var reverse = document.getElementById('reverse')
    var love = document.getElementsByName('love')
    console.log(love)

    //全选绑定事件
    all.onclick = function () {
        for (i = 0; i < love.length; i++) {
            love[i].checked = true;
        }
    }

    // 取消事件
    cancel.onclick = function () {
        for (var item of love) {
            item.checked = false
        }
    }

    // 反选事件
    reverse.onclick = function () {
        for (var item of love) {
            item.checked = !item.checked
        }
    }
</script>

分类

其他

标签