JS选择框全选效果（从入门到优化）

最新推荐文章于 2024-04-02 19:39:43 发布

白泽的笔记

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量282

点赞数

本文链接：https://blog.csdn.net/m0_51024444/article/details/126297253

版权

<!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" id="checkall">
    <label for="checkall">全选</label>
    <ul>
        <li>
            <input type="checkbox" id="apple" class="checkone">
            <label for="apple">苹果</label>
        </li>
        <li>
            <input type="checkbox" id="banana" class="checkone">
            <label for="banana">香蕉</label>
        </li>
        <li>
            <input type="checkbox" id="orange" class="checkone">
            <label for="orange">橘子</label>
        </li>
        <li>
            <input type="checkbox" id="watermelon" class="checkone">
            <label for="watermelon">西瓜</label>
        </li>
    </ul>
</body>
<script>
    var ckAll = document.getElementById("checkall");
    var ckOnes = document.querySelectorAll(".checkone");

    // ckAll.onchange = function () {
    //     var t = this.checked;
    //     if (t === true) {
    //         for (var i = 0; i < ckOnes.length; i++) {
    //             ckOnes[i].checked = true;
    //         }
    //     } else {
    //         for (var i = 0; i < ckOnes.length; i++) {
    //             ckOnes[i].checked = false;
    //         }
    //     }
    // }

    //优化全选/全不选 --> 选中/未选中
    ckAll.onchange = function () {
        // var t = this.checked;
        for (var i = 0; i < ckOnes.length; i++) {
            // ckOnes[i].checked = t;
            ckOnes[i].checked = this.checked;
        }
    }

    //给每个商品的复选框添加onchange事件
    // ckOnes.forEach((item) => {
    //     item.onchange = function () {
    //         var count = 0;
    //         for (var i = 0; i < ckOnes.length; i++) {
    //             if (ckOnes[i].checked) {//如果单个商品被选中
    //                 count++;//计数
    //             }
    //         }

    //         if (count === ckOnes.length) {//计的数与所有的商品数量一样时，表明所有商品已被选中
    //             ckAll.checked = true;
    //         } else {
    //             ckAll.checked = false;
    //         }
    //     }
    // })

    // ckOnes.forEach(item => {
    //     item.onchange = function () {
    //         var t = Array.from(ckOnes).every(function (item) {
    //             return item.checked;
    //         });
    //         // console.log(t);
    //         ckAll.checked = t;
    //     }
    // })

    ckOnes.forEach(item => {
        item.onchange = function () {
            ckAll.checked = Array.from(ckOnes).every(item => item.checked);
        }
    })

</script>

</html>