選擇所有復選框（兩個單獨的復選框組）

Question

我一直在使用下面的代碼來選擇/取消選擇頁面上的所有復選框。 該頁面僅在頁面上具有"allowedphrases"類的一組復選框開始。 現在，該頁面包含兩個單獨的復選框列表：一個用於"allowedphrases" ，另一個用於"bannedphrases" 。

我希望頁面上有兩個單獨的"Select all"復選框：

• 一個到"select_all_allowed" （選中所有帶有"allowedphrases"類的復選框）
• 一個到"select_all_banned" （選中類別為"bannedphrases"所有復選框）。

如何編輯下面的代碼以包含其他復選框集？ 目前，它僅適用於"allowedphrases" 。

<SCRIPT>
var select_all = document.getElementById("select_all_allowed"); //select all checkbox
var checkboxes = document.getElementsByClassName("allowedphrases");
//checkbox items

//select all checkboxes
select_all.addEventListener("change", function(e){
    for (i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = select_all.checked;
}
});


for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function(e){ //".allowedphrases" change
    //uncheck "select all", if one of the listed checkbox item is unchecked
    if(this.checked == false){
        select_all.checked = false;
    }
    //check "select all" if all checkbox items are checked
    if(document.querySelectorAll('.checkbox:checked').length == checkboxes.length){
        select_all.checked = true;
    }
});
}
</SCRIPT>

HTML

<input type="checkbox" name="Ids[]" value="MYVALUE" class="bannedphrases">
<input type="checkbox" name="Ids[]" value="MYVALUE" class="allowedphrases">
<div><input type="checkbox" id="select_all_allowed"> Select All Allowed</div>
<div><input type="checkbox" id="select_all_banned"> Select All Banned</div>

Answer 1

解決方案

根據您的意願：如果取消選中短語之一復選框，則控件選擇復選框也將被取消選中。 如果所有的短語復選框都被選中，那么控件選擇復選框也會被選中。

 var select_all_allowed = document.getElementById('select_all_allowed'), select_all_banned = document.getElementById('select_all_banned'), allowedphrases = document.querySelectorAll('.allowedphrases'), bannedphrases = document.querySelectorAll('.bannedphrases'); function check(arPhrases, objSelect) { var areAllChecked = true, i = arPhrases.length; while(i--) //uncheck 'select all', if one of the listed checkbox item is unchecked if(!arPhrases[i].checked) { areAllChecked = false; break } objSelect.checked = areAllChecked; } select_all_allowed.addEventListener('change', function(e) { for(var i = allowedphrases.length; i--;) allowedphrases[i].checked = this.checked; }); select_all_banned.addEventListener('change', function(e) { for(var i = bannedphrases.length; i--;) bannedphrases[i].checked = this.checked; }); for(var i = allowedphrases.length; i--;) { allowedphrases[i].addEventListener('change', function(e) { check(allowedphrases, select_all_allowed); }); } for(i = bannedphrases.length; i--;) { bannedphrases[i].addEventListener('change', function(e) { check(bannedphrases, select_all_banned); }); } 

 label{cursor:pointer} 

 <div style="width:300px"> <fieldset> <legend>Allowed phrases</legend> <input type="checkbox" class="allowedphrases"> <input type="checkbox" class="allowedphrases"> <input type="checkbox" class="allowedphrases"> </fieldset> <fieldset> <legend>Banned phrases</legend> <input type="checkbox" class="bannedphrases"> <input type="checkbox" class="bannedphrases"> <input type="checkbox" class="bannedphrases"> </fieldset> </div> <label><input type="checkbox" id="select_all_allowed">Select all allowed</label><br> <label><input type="checkbox" id="select_all_banned">Select all banned</label>