JavaScript控制全选

作者： 作者的头像   福心 ,  2023-07-30 22:18:44 ,  所有人可见 ,  阅读 90

0


实现效果：点击全选时，选项全勾选，再次点击全选，选项全不选；选项全选时，全选自动勾选上，选项不全选时，全选不勾选

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选示例</title>
</head>

<body>
    <div><input type="checkbox" name="Q" id="Q">全选</div>
    <input type="checkbox" name="A" id="A">小A
    <input type="checkbox" name="B" id="B">小B
    <input type="checkbox" name="C" id="C">小C

    <script>
        let input = document.querySelectorAll('input');

        // 全选当作一个按钮
        input[0].onclick = function () {
            let flag = input[0].checked
            for (let i = 1; i < input.length; i++) {
                input[i].checked = flag ? 'true' : ''
            }
        }
        // 其他当作一个大按钮
        for (let i = 1; i < input.length; i++) {
            input[i].onclick = function () {
                let cnt = 0;
                for (let k = 1; k < input.length; k++) {
                    if (input[k].checked) cnt++;
                }
                input[0].checked = (cnt == input.length - 1) ? 'true' : ''
            }
        }
    </script>

</body>

</html>

0 评论

1024
x