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 checkbox 全選全不選 JS實現復選框的全選/全不選 jQuery實現全選與全不選功能 jQuery/javascript實現全選全不選 jquery實現全選和全不選功能一個checkbox 用jquery實現全選、全不選 html js 全選反選全不選源代碼 JQuery實現全選、全不選和反選功能 Zepto 實現checkbox全選與全不選狀態切換 bootstrap-select控件全選，全不選，查詢功能實現