javascript - 如何获取特定 ul 的选中复选框

Question

我正在创建一个动态 ul 并试图仅获取特定 ul 的复选框。

$(document).on("click", "input:checkbox[name=filter]:checked", function() {
  var flags = Array();
  $("input:checkbox[name=filter]:checked").each(function() {
    flags.push($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-list">
  <li><input type="checkbox" name="filter" value="form">Form</li>
  <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li>
  <li><input type="checkbox" name="filter" value="priority">Priority</li>
  <li><input type="checkbox" name="filter" value="question">Question</li>
</ul>
<ul class="dropdown-list">
  <li><input type="checkbox" name="filter" value="form">Form</li>
  <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li>
  <li><input type="checkbox" name="filter" value="priority">Priority</li>
  <li><input type="checkbox" name="filter" value="question">Question</li>
</ul>
<ul class="dropdown-list">
  <li><input type="checkbox" name="filter" value="form">Form</li>
  <li><input type="checkbox" name="filter" value="anonymise">Anonymise</li>
  <li><input type="checkbox" name="filter" value="priority">Priority</li>
  <li><input type="checkbox" name="filter" value="question">Question</li>
</ul>

所有三个 UL 都是相同的，在这种情况下，我如何才能仅获取特定 ul 的所有复选框。

这给了我来自所有 uls 的所有选中的复选框。

Answer 1

我想您只需要包含被单击元素的 ul。试试这个:

$(document).on("click", "input:checkbox[name=filter]:checked", function(){
    var flags = Array();
    $("input:checkbox[name=filter]:checked", $(this).parents("ul").first()).each(function(){
        flags.push($(this).val());
    });
    console.log(flags);
});

内部 each 函数前面有一个 $(this).parents("ul").first() 范围标识符。这将按点击输入的容器过滤输入。