原生JS实现全选、全不选

茶卡盐佑星_

于 2024-05-18 12:20:42 发布

阅读量156

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/hexadecimal_001/article/details/139023297

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check All Example</title>
</head>
<body>

<input type="checkbox" id="checkAll"> Check All
<br>
<input type="checkbox" class="checkbox"> Item 1
<br>
<input type="checkbox" class="checkbox"> Item 2
<br>
<input type="checkbox" class="checkbox"> Item 3
<br>

<script>
var checkAll = document.getElementById('checkAll');
var checkboxes = document.querySelectorAll('.checkbox');

// 全选/全不选功能
checkAll.addEventListener('change', function() {
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = checkAll.checked;
    });
});

// 每个复选框改变时检查是否所有复选框都被选中
checkboxes.forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
        var allChecked = true;
        checkboxes.forEach(function(checkbox) {
            if (!checkbox.checked) {
                allChecked = false;
            }
        });
        checkAll.checked = allChecked;
    });
});
</script>

</body>
</html>

在这个示例中，我们首先获取全选复选框和所有子复选框的元素，然后为全选复选框和每个子复选框添加事件监听器。当全选复选框的状态改变时，我们将所有子复选框的状态设置为与全选复选框相同。当任何一个子复选框的状态改变时，我们检查是否所有子复选框都被选中，如果是则将全选复选框设置为选中状态，否则设置为未选中状态。

这样就实现了简单的全选和全不选功能。你可以根据自己的需求对代码进行定制和扩展。