Как перебрать Div и извлечь отдельные значения флажков?

Question

Я очень новичок в JavaScript / JQuery ...

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

<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"/>
                       John Doe
            </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"/> 
                       Jane Doe
            </label>
        </li>
    </ul>
</div>

Написал обработчик событий JQuery, который делает это:

$('#emailCheckListId_ul').click(function() {
    var divElement = document.getElementById(emailCheckListId);

    // How to iterate over each element and obtain something like this:
    //
    // [johndoe@aol.com,janedoe@aol.com]
});

Любая помощь будет наиболее ценной ...

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

Answer 1

Если вы ставите только флажки, вы можете использовать этот селектор: "input[type=checkbox]"

Кроме того, .val() имеет значение .attr('value')

$(function(){
    var x = $("#emailCheckListId").find("input[type=checkbox]").map(function(){
        return $(this).val();
    }).get();
    console.log(x);  //=> ['johndoe@aol.com', 'janedoe@aol.com']
});

Answer 2

.map() идеально подходит для этого.Вы можете отобразить набор из li элементов и извлечь содержащиеся в них данные, например:

$('#emailCheckListId_ul').click(function() {
  var divElement = $('#' + emailCheckListId);

  var emails = $(this).find('li input').map(function() {
    return $(this).val();
  }); // => ['johndoe@aol.com', 'janedoe@aol.com']
});

См. jsFiddle .

Answer 3

Работает, а также заполняет / не заполняет текстовое поле ввода электронной почты. Трюк заключался в использовании фильтра: вход: флажок: проверено

// 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("root.form.email");

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

Не смог бы сделать это без помощи всех вас, замечательные люди! Спасибо за помощь!

Answer 4

Обычный js:

function getValues(el) {
  var result = [];
  var inputs = el.getElementsByTagName('input');

  for (var i=0, iLen=inputs.length; i<iLen; i++) {

    // Maybe test the value here and only add the ones that
    // meet some validation criteriion (e.g. not empty)
    result[i] = inputs[i].value;
  }
  return result;  // returns an array
}

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

<div id="emailCheckListId" onclick="getValues(this);" ... >