全选与全不选以及个别选

最新推荐文章于 2022-03-01 14:35:00 发布

hygge-lmp

最新推荐文章于 2022-03-01 14:35:00 发布

阅读量411

点赞数

本文链接：https://blog.csdn.net/weixin_42453826/article/details/88322169

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <input type="checkbox" name="button" value="button" class="isAll"> <br />
        <input type="checkbox" value='item1' name="lmp" class="item"><label for="">苹果</label><br />
        <input type="checkbox" value='item2' name="lmp" class="item"><label for="">葡萄</label><br />
        <input type="checkbox" value='item3' name="lmp" class="item"><label for="">香蕉</label><br />
        <input type="checkbox" value='item4' name="lmp" class="item"><label for="">桃子</label><br />
    </div>
</body>

</html>
<script>
    var items = document.getElementsByClassName("item");
    var isAll = document.getElementsByClassName("isAll")[0];
    // 全选与全不选
    isAll.onclick = function lmp() {
        if (isAll.checked == true) {
            for (i = 0; i < items.length; i++) {
                items[i].checked = true;
            }
        } else {
            for (i = 0; i < items.length; i++) {
                items[i].checked = false;
            }
        }

    }
    // 每个按钮上添加点击事件  判断是否将全选按钮选中
    for (var i = 0; i < items.length; i++) {
        items[i].onclick = function () {
            var turn = true;
            for (var n = 0; n < items.length; n++) {
                // 只要有未选中的项，那么就将turn转换为false    
                if (items[n].checked == false) {
                    turn = false;
                    break; //break 的运用减少了计算机的运算的次数
                }
            }
            isAll.checked = turn;
        }
    }
</script>