如果所有的子类别复选框都已选中，则应自动选中父复选框_如果选中所有子复选框，则选中父复选框_如果我选中了所有兄弟复选框，父级复选框将自动选中 - 腾讯云开发者社区

如果所有的子类别复选框都已选中，则应自动选中父复选框

基础概念

在前端开发中，复选框（checkbox）是一种常见的用户界面元素，用于允许用户选择一个或多个选项。父复选框和子复选框通常用于表示层次结构的数据，其中父复选框代表一个类别，子复选框代表该类别下的具体项。

类型

单向关联：父复选框的选中状态影响子复选框，但子复选框的选中状态不影响父复选框。
双向关联：父复选框和子复选框的选中状态相互影响。

应用场景

这种机制常见于多级分类的选择场景，例如：

文件管理器中的文件夹和文件选择。
电商平台中的商品分类选择。
设置页面中的功能开关。

实现方法

以下是一个使用JavaScript实现双向关联的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Example</title>
    <script>
        function updateParentCheckbox() {
            const parentCheckbox = document.getElementById('parentCheckbox');
            const childCheckboxes = document.querySelectorAll('.childCheckbox');
            let allChecked = true;

            childCheckboxes.forEach(checkbox => {
                if (!checkbox.checked) {
                    allChecked = false;
                }
            });

            parentCheckbox.checked = allChecked;
        }

        function updateChildCheckboxes() {
            const parentCheckbox = document.getElementById('parentCheckbox');
            const childCheckboxes = document.querySelectorAll('.childCheckbox');

            if (parentCheckbox.checked) {
                childCheckboxes.forEach(checkbox => {
                    checkbox.checked = true;
                });
            }
        }
    </script>
</head>
<body>
    <label>
        <input type="checkbox" id="parentCheckbox" onclick="updateChildCheckboxes()">
        Parent Checkbox
    </label>
    <br>
    <label>
        <input type="checkbox" class="childCheckbox" onclick="updateParentCheckbox()">
        Child Checkbox 1
    </label>
    <br>
    <label>
        <input type="checkbox" class="childCheckbox" onclick="updateParentCheckbox()">
        Child Checkbox 2
    </label>
    <br>
    <label>
        <input type="checkbox" class="childCheckbox" onclick="updateParentCheckbox()">
        Child Checkbox 3
    </label>
</body>
</html>