主复选框控制子复选框：仅能全选无法取消的问题

Got it, let's sort out this checkbox behavior! The core issue here is that your current refresh_checkbox_list function only handles checking all child checkboxes when the main one is selected, but it doesn't mirror the "unchecked" state back to the children. Let's rewrite the function to handle both scenarios properly:

function refresh_checkbox_list() {
    // Grab the main checkbox element and its current state
    const mainCheckbox = document.getElementById('gdr_select_users');
    const isMainChecked = mainCheckbox.checked;

    // Get all child checkboxes - adjust the selector to match your actual elements!
    // Replace with your real selector (e.g., '.user-checkbox' or '#user-container input[type="checkbox"]')
    const childCheckboxes = document.querySelectorAll('.child-checkbox');

    // Sync every child checkbox's state with the main one
    childCheckboxes.forEach(checkbox => {
        checkbox.checked = isMainChecked;
    });
}

Key improvements explained: #

• Use the checked property directly: Instead of setAttribute("checked"), we update the element's live checked property. This is way more reliable because setAttribute only modifies the HTML attribute, not the DOM's actual state (which can lead to weird inconsistencies).
• Cover both states: We first capture whether the main checkbox is checked or unchecked, then apply that exact state to all child boxes—this handles both "check all" and "uncheck all" in one go.
• Target the right children: Make sure the querySelectorAll selector matches your actual child checkboxes. Swap .child-checkbox with the correct class, ID, or container-based selector for your list.

If your original code had a partial IIFE wrapped around the logic, you can slot this updated logic right into that structure—just double-check you're referencing the main checkbox and child elements correctly.

内容的提问来源于stack exchange，提问作者Maxime FAREZ-GRIM