Как установить один флажок, чтобы включить / выключить другие флажки? - PullRequest
Новая
       1

Как установить один флажок, чтобы включить / выключить другие флажки?

0 голосов
/ 04 августа 2011

Есть диалоговое окно (содержащее два элемента 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) Содержит ссылку на несколько флажков (содержащих адреса электронной почты). 

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

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, проверены.

Как я могу настроить его так, чтобы, если я нажму на Выбрать все, все флажки будут заполнены, а когда я сниму флажок на Выбрать все, все проверки будут удалены из флажков, а адреса электронной почты удалены Кому: текстовое поле?

Спасибо, что нашли время прочитать это.

1 Ответ

0 голосов
/ 04 августа 2011

Чтобы установить флажок, установите для его свойства selected значение true: 

this.checked = true;

Вы можете собирать значения гораздо эффективнее, используя: 

emails.push(this.value);

В более общем смысле вы можете установитьпроверяется состояние флажков, если вы сначала устанавливаете состояние каждого флажка в состояние флажка selectAllEmails : 

this.checked = selectAllEmails.checked;

, а затем задаете значение массива электронных писем на основе того, какие из них являютсяфлажок.

Логика становится немного более запутанной, поскольку вы хотите:

  1. Отметьте все флажки, если флажок «выбрать все» установлен и отмечен и (возможно,) измените метку на «снять все»
  2. Если снят флажок с любого из адресов электронной почты, флажок «выбрать все» должен быть снят, а метка установлена ​​на «выбрать все».
  3. Снимите все флажки, если установлен флажок «выбрать все», и в результате этого флажок снят.

Таким образом, вам нужна одна функция для обработки щелчков, а другая - для сопоставления электронной почты.адреса в зависимости от того, какие флажки установлены, когда щелчок сделан.

...