如何设置单个复选框来切换/取消切换其他复选框？

Question

有一个对话框（包含两个 div）：

(1) 一个标签，其中包含一个标记为“全选”的单独复选框。

<div class="div01">
    <div class="notRequiredPrefix"></div>
        <input type="checkbox" 
                           name="root.module.emailCheckBox" 
                           id="selectAllEmailsId" 
                           onclick="selectAllEmails(this)"/>

        <label for="selectAllEmailsId">Select All</label>
        <div class="notRequiredSuffix"></div>
    </div>
</div>

(2) A 包含对一堆复选框的引用（包含电子邮件地址）。

<div id="emailCheckListId" class="checkList">
     <ul id="emailCheckListId_ul">
         <li>
             <label for="root.module.emailCheckList_0" class="checkListLabel">
             <input type="checkbox"  
                          value="[email protected]" 
                          id="root.module.emailCheckList_0"            
                          name="root.module.emailCheckList"/>
                [email protected]
            </label>
        </li>

        <li>
              <label for="root.module.emailCheckList_1" class="checkListLabel">
              <input type="checkbox"  
                     value="[email protected]"       
                     id="root.module.emailCheckList_1" 
                     name="root.module.emailCheckList"/>
                [email protected]
            </label>
        </li>
    </ul>
</div>

JavaScript 代码：

function selectAllEmails(field) {

    if (field.checked) {

        // Declare array
        var emails = [];

        // Iterate through each array and put email addresses into array
        $('#emailCheckListId_ul input:checkbox').each(function() {
            alert($(this));

            // Set all checkboxes to true and 
            // make them checked how to do that here?

            emails.push($(this).val());
        });

        // Assign variable as To: text field by obtaining element's id.
        var textField = document.getElementById("root.module.email");

        // Add / Remove array from text field
        textField.value = emails;
    } else if (!field.checked){
        // How to remove any possible check boxes that are checked
        // and remove them from text field
    }
}

发生的情况是，当我单击“全选”复选框时，它会使用所有电子邮件地址填充“收件人：”文本字段。

但是，属于 emailCheckListId_ul 内的复选框会被选中。

如何进行设置，以便在单击“全选”时填充所有复选框，当我取消选中“全选”时，将从复选框中删除所有选中项，并从“收件人：”文本中删除电子邮件地址场地？

感谢您花时间阅读本文。

Answer 1

要选中复选框，请将其选中属性设置为 true：

this.checked = true;

您可以使用以下方法更有效地收集值：

emails.push(this.value);

更一般地，如果您首先将每个复选框的状态设置为 selectAllEmails 复选框：

this.checked = selectAllEmails.checked;

然后根据选中的邮件设置电子邮件数组的值。

不过，逻辑变得有点复杂，因为您想要：

1. 如果单击并选中“全选”复选框，则选中所有复选框，并且（可能）将标签更改为“取消选中所有”
2. 如果任何电子邮件地址复选框被选中取消选中，则必须取消选中“全选”复选框，并将标签设置为“全选”。
3. 如果单击“全选”复选框，则取消选中所有复选框，结果是取消选中。

因此，您需要一个函数来处理点击，另一个函数根据点击完成时选中的复选框来整理电子邮件地址。