js 实现全选/全不选效果

本文转载自查看原文 2019-09-05 19:06 373 JS

js 实现全选/全不选效果

代码如下：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>全选</title>
</head>
<body>
<!--html中两个单词连接用-分隔 -->
<input type="checkbox" id="check-all" onclick="switchItem();"><br>

<input type="checkbox" class="check-item"><br>
<input type="checkbox" class="check-item"><br>
<input type="checkbox" class="check-item"><br>
<input type="checkbox" class="check-item"><br>
<input type="checkbox" class="check-item"><br>
<input type="checkbox" class="check-item"><br>
<input type="checkbox" class="check-item"><br>

<script>
    //1.找到全选框的状态
    //2.把其他多选框设置成全选框的状态
    function switchItem() {
        var checkAll = document.getElementById('check-all');

        var items = document.getElementsByClassName('check-item');
    //因为是多个多选框，所以需要遍历，不需要下标，可以用forof循环
        for (var item of items){
            item.checked = checkAll.checked ;
        }
    }

</script>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 原生js实现全选反选全不选 js复选框实现全选、全不选、反选 JS实现CheckBox 全选、反选、全不选 js复选框实现全选、全不选、反选 JS checkbox 全选全不选简单的js反选，全选，全不选 js(四) 全选/全不选和反选 JS实现复选框的全选/全不选关于checkbox全选与全不选的实现与遇到的问题 jQuery实现全选与全不选功能