js 实现全选/全不选效果

js 实现全选/全不选效果

代码如下:

DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>全选title>
head>
<body>

<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>

 

转载于:https://www.cnblogs.com/here-I-am/p/11469045.html

你可能感兴趣的:(js 实现全选/全不选效果)