javascript - 复选框数组

Question

只是想知道是否有人可以帮忙。我目前有这样的代码:

<section>
  <span class="tags"></span>

  <label for="shoes">Shoes</label>
  <input type="checkbox" id="shoes">

  <label for="jeans">Jeans</label>
  <input type="checkbox" id="jeans">

  <label for="tops">Tops</label>
  <input type="checkbox" id="tops">
</section>

<section>
  <span class="tags"></span>

  <label for="monkey">monkey</label>
  <input type="checkbox" id="monkey">

  <label for="lion">lion</label>
  <input type="checkbox" id="lion">

  <label for="dog">dog</label>
  <input type="checkbox" id="dog">
</section>

每个“部分”都是动态生成的。选中时，如何将每个输入的值插入到每个部分的范围中。我一直在尝试使用数组，但由于每个部分都是动态生成的而陷入困境。

你们谁能帮帮我吗？

Answer 1

最好给每个复选框输入一个值，无论如何，我会使用 id 来代替。

// Listen to all checkboxes
$('section input[type="checkbox"]').click(function(e) {
    var $this = $(e.target);
    // Find the container of same group.
    var $parent = $this.parent('section');
    // Find all checked ones.
    var checked = $parent.find('input[type="checkbox"]:checked');
    // Map the value or id, to an array.
    var result = $.map(checked, function(ele) {
        return $(ele).attr('id');
    });
    // Get the result, use it whatever you want.
    $parent.find('.tags').text(result.join(' '));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <span class="tags"></span>

  <label for="shoes">Shoes</label>
  <input type="checkbox" id="shoes">

  <label for="jeans">Jeans</label>
  <input type="checkbox" id="jeans">

  <label for="tops">Tops</label>
  <input type="checkbox" id="tops">
</section>

<section>
  <span class="tags"></span>

  <label for="monkey">monkey</label>
  <input type="checkbox" id="monkey">

  <label for="lion">lion</label>
  <input type="checkbox" id="lion">

  <label for="dog">dog</label>
  <input type="checkbox" id="dog">
</section>