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>

选择所有复选框（两个独立的复选框组）

1 个答案: