如何遍历Div并提取单个复选框值

How to iterate over Div and extract individual check box values?

本文关键字：提取 单个 复选框 Div 何遍历 遍历      更新时间：2023-09-26

我是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]
});

任何帮助都将是非常感激的…

感谢您花时间阅读这篇文章!

.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。

如果你只选择复选框，你会想要使用这个选择器:"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']
});

Plain 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上(这里是内联的，但你也可以用onload或DOM ready或其他方式):

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

让它工作，它还填充/取消填充电子邮件输入文本字段。诀窍是使用过滤器:input:checkbox:checked

// 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;
});
如果没有你们这些了不起的人的帮助，我是不可能做到的!谢谢你的帮助!
相关文章：