从主复选框切换一组复选框

Question

我有以下 JS 实际工作并检查我所有的复选框，如果顶部的一个被选中（当前有效）因此我无法通过重复相同的过程来取消选中它们（取消选中第一个框不是不可选中的）

每次未选中或选中复选框时，我都有以下代码实际调用我的函数：

function refresh_checkbox_list(){
    // document.getElementById('gdr_select_users').setAttribute("checked");

    (function() {
    var aa = document.querySelectorAll("input[type=checkbox]");
    for (var i = 0; i < aa.length; i++){
        aa[i].checked = true;
    }
})()
}

<input type="checkbox" name="gdr_select_all_users" id="gdr_select_all_users" onchange="refresh_checkbox_list()">
<input type="checkbox" name="gdr_select_users" id="gdr_select_users">

只是说：我是一个真正的 JavaScript 菜鸟，我知道我将如何在 PHP 中处理它，所以它会检查和取消检查，但我不知道“if”语句在 JS 中是如何工作的，这是我的实际问题..

我在考虑一个 if 语句，它检查我的第一个框是否被选中，然后检查所有其他框，然后是另一个完全相反的语句。对吧？

我必须承认我在这个网站上也发现了那个JS（一个有类似案例的用户）

Answer 1

不要使用true，而是使用#gdr_select_all_users的选中状态。

还需要从循环中排除#gdr_select_all_users。可以在查询选择器中使用not()，或者更好地为用户复选框应用一个通用类

function refresh_checkbox_list(){
    // get checked state of the "check all" box 
    let allChecked = document.getElementById('gdr_select_all_users').checked;
    (function() {
    var aa = document.querySelectorAll("input[type=checkbox]:not(#gdr_select_all_users)");
    for (var i = 0; i < aa.length; i++){
        // set other checkboxes to same state as the "check all"
        aa[i].checked = allChecked;
    }
})()
}

Check all:<input type="checkbox" name="gdr_select_all_users" id="gdr_select_all_users" onchange="refresh_checkbox_list()">

<br>
User 1<input type="checkbox" name="gdr_select_users_1" >
<br>
User 2<input type="checkbox" name="gdr_select_users_2" >