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

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

如果您只是在复选框之后，则需要使用此选择器："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 3

普通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);" ... >

Answer 4

让它工作，它还填充/取消填充电子邮件输入文本字段。诀窍是使用过滤器：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;
});

如果没有所有优秀人才的帮助，我们就无法做到这一点！谢谢你的帮助！

如何迭代Div并提取单个复选框值？

4 个答案: