zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    第二阶段冲刺6
    第二阶段冲刺5
    第二阶段冲刺4
    第二阶段冲刺3
    暑假学习进度七
    暑假学习进度六
    暑假学习进度五
    暑假学习进度四
    暑假学习进度三
    暑假学习进度二
  • 原文地址:https://www.cnblogs.com/here-I-am/p/11469045.html
Copyright © 2011-2022 走看看