jQuery 更改时选择所有复选框名称并将其解析为字符串

Question

我正在尝试执行以下操作：

这是我的 html:

<p id="textList"></p>
<div id="userList">
  <input type="checkbox" data-name="John" name="users[]" value="1">
  <input type="checkbox" data-name="Peter" name="users[]" value="2">
  <input type="checkbox" data-name="Mike" name="users[]" value="3">
</div>

这是我目前的javascript

$('#userList').on('change', 'input', function() {
    $.each($('#userList input'), function(i,v) {
        if($(this).is(':checked')) {
          ...

        }
    });
})

当复选框被选中并且需要遍历每个复选框并将数据名称中的所有名称附加到#textList 时，以逗号分隔。像 (John, Peter)，如果未选中复选框，则从 #textList

中删除名称

Answer 1

您可以通过使用 .map 循环选中的复选框并 return 仅其数据名称来实现，如以下代码：

$('#userList').on('change', 'input', function(e) {

   var names = $(e.delegateTarget).find(':checkbox:checked').map(function(v, i) {
     return $(i).data('name');
   }).get();

  $('#textList').text(names);

});

DEMO

jQuery 更改时选择所有复选框名称并将其解析为字符串

jQuery on chnage collect all checkbox names and parse it as string

checkbox

each

jquery