How to setup a single checkbox to toggle / untoggle other check boxes?

Have a dialog box (containing two divs):

(1) A tag which contains an individual checkbox labeled as Select All.

<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 containing a reference to a bunch of check boxes (containing e-mail addresses).

<div id="emailCheckListId" class="checkList">
     <ul id="emailCheckListId_ul">
         <li>
             <label for="root.module.emailCheckList_0" class="checkListLabel">
             <input type="checkbox"  
                          value="johndoe@aol.com" 
                          id="root.module.emailCheckList_0"            
                          name="root.module.emailCheckList"/>
                johndoe@aol.com
            </label>
        </li>

        <li>
              <label for="root.module.emailCheckList_1" class="checkListLabel">
              <input type="checkbox"  
                     value="janedoe@aol.com"       
                     id="root.module.emailCheckList_1" 
                     name="root.module.emailCheckList"/>
                janedoe@aol.com
            </label>
        </li>
    </ul>
</div>

JavaScript code:

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
    }
}

What happens is that when I click on the Select 开发者_如何学CAll check box, it populates my To: text field with all the e-mail addresses.

However, the checkboxes belonging inside emailCheckListId_ul are checked.

How can I set it up so that if I click on Select All, all the checkboxes are populated and when I uncheck on Select All, all the checks are removed from the check boxes and the e-mail addresses are removed from the To: text field?

Thank you for taking the time to read this.

To check a checkbox, set its checked property to true:

this.checked = true;

You can collect the values much more efficiently using:

emails.push(this.value);

More generically, you can set the checked state of the checkboxes if you first set the state of each checkbox to the state of the selectAllEmails checkbox:

this.checked = selectAllEmails.checked;

then set the value of the emails array based on which ones are checked.

The logic gets a bit more convoluted though, since you want to:

1. Check alll the checkboxes if the "select all" checkbox is clicked and is checked and (probably) change the label to "uncheck all"
2. If any of the email address checkboxes is unchecked, the "select all" checkbox must be unchecked and the label set to "select all".
3. Uncheck all the checkboxes if the "select all" checkbox is clicked and the result is that it is unchecked.

So you need one function to handle the clicks and another to collate the email addresses depending on which checkboxes are selected when the clicking is done.