Не могу снять флажки с помощью Javascript

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, который проверяет, установлен ли мой 1-й флажок, затем проверяет все остальные поля, а затем еще один оператор, который делает обратное. Правильно?

Я должен признать, что я также обнаружил, что 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" >