Как перебрать перечисленный Check List (флажки), используя JQuery? - PullRequest
Новая
       8

Как перебрать перечисленный Check List (флажки), используя JQuery?

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

Как перебрать перечисленный контрольный список (флажки) с помощью JQuery?

Здравствуйте, у меня есть следующий контрольный список (содержащий 2 флажка, в которых есть 2 разных адреса электронной почты): 

<div id="emailCheckListId" class="checkList">
 <ul id="emailCheckListId_ul">
    <li>
        <label for="mycomponent.emailCheckList_0" class="checkListLabel">
            <input type="checkbox"  
                   value="johndoe@yahoo.com" 
                   id="mycomponent.emailCheckList_0" 
                   name="mycomponent.emailCheckList"/>
                   johndoe@yahoo.com
        </label>
    </li>
    <li>
        <label for="mycomponent.emailCheckList_1" class="checkListLabel">
            <input type="checkbox"  
                   value="johndoe@gmail.com" 
                   id="mycomponent.emailCheckList_1" 
                   name="mycomponent.emailCheckList"/> 
                   johndoe@gmail.com
        </label>
    </li>
</ul>

Я могу использовать прослушиватель событий JavaScript для заполнения / удаления из текстового поля каждый раз, когда пользователь нажимает на отдельный флажок, используя это: 

// Event listener which picks individual contacts
// and populates input field.
$('#emailCheckListId_ul input:checkbox').change(function() {
     // Declare array
     var emails = [];

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

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

     // Add / Remove array from text field
     textField.value = emails;
 });

Тем не менее, у меня теперь есть перечислимый контрольный список ... Просто нужно добавить / объединить индексный номер (который я сохранил в скрытом поле и всегда могу получить правильный), но не могу понять, как передатьво втором итераторе «input: checkbox: флажок».

Вот источник HTML проверенного списка: 

 <div id="mycomponent.comment0.replyToRecipientsCheckList" 
      class="checkList" 
      onclick="selectIndividualRecipients()">
      <ul id="mycomponentcomment0.replyToRecipientsCheckList_ul">
          <li>
            <label for="mycomponent.comment0.replyToRecipientsCheckList_0" 
                 class="checkListLabel">
               <input type="checkbox"  
                      value="johndoe@yahoo.com" 
                      id="mycomponent.comment0.replyToRecipientsCheckList_0" 
                      name="mycomponent.comment0.replyToRecipientsCheckList"/>
                      johndoe@yahoo.com
            </label>
    </li>
    <li>
        <label for="mycomponent.comment0.replyToRecipientsCheckList_1" 
               class="checkListLabel">
               <input type="checkbox"  
                      value="johndoe@gmail.com" 
                      id="mycomponent.comment0.replyToRecipientsCheckList_1" 
                      name="mycomponent.comment0.replyToRecipientsCheckList"/> 
                      johndoe@gmail.com
        </label>
    </li>
 </ul>
</div>

JavaScript: 

// Uses an event listener which picks individual contacts
// and populates input field.
function selectIndividualRecipients() {

    var checkListPrefix = 'mycomponent.comment';    
    var index = document.getElementById("commentHiddenField").value;
    var checkListPostfix = '.replyToRecipientsCheckList_ul';
    var event =  checkListPrefix + index + checkListPostfix;

    $(event).change(function() {

         // Declare array
         var emails = [];

         // Iterate through each array and put email addresses into array

         // THIS DOESN'T SEEM TO BE WORKING:
         var test = '#' + event.attr('id') + 'input:check:checked';
         $(test).each(function() {
         alert('inside iterator');
         alert('this.val: ' + $(this).val());
         emails.push($(this).val());
         alert('emails = ' + emails);
    });

    // Assign variable to Reply To: text field by obtaining element's id.
    var textField = document.getElementById(indexedReplyTextField);

    // Add / Remove array from text field
    textField.value = emails;
}

Браузер говоритthat ($ test) .each () выдает исключение, которое не перехватывается, и это недопустимо ...

Что я, возможно, делаю неправильно?

Большое спасибо за чтение этого ...

Ответы [ 2 ]

1 голос
/ 30 августа 2011

Может быть более простой метод: 

$('div.checkList').delegate('input', 'change', function() {
   textField.value = $('div.checkList ul li input:checked').map(function() {
      return $(this).val();
   }).get().join('; ');
});
1 голос
/ 30 августа 2011

Вы пытались изменить объявление var test следующим образом? 

var test = '#' + event.attr('id') + ' input:checkbox:checked';

Обратите внимание на пробел перед вводом и флажок вместо флажка.

...