I am creating a dynamic ul and trying to get the checked boxes of a particular ul only.

$(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=".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>

I am creating a dynamic ul and trying to get the checked boxes of a particular ul only.

$(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./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>

all the three UL are identical, in this case how can i get the the all the checkboxes of a particular ul only.

this gives me all the selected checkboxes from all uls.

• javascript
• jquery
• html

5 Answers 5

I guess you want only the ul containing that clicked element. Try this:

$(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);
});

The inner each function has a $(this).parents("ul").first() scope identifier before it. This will filter the inputs by the container of the clicked input.

To achieve this you need to get the closest() ul element, then find() all the checkboxes within that ul before looping over them to build the array. Also note that you can simplify the loop by using map() instead. Try this:

$(document).on("click", "input:checkbox[name=filter]:checked", function() {
  var flags = $(this).closest('ul').find("input:checkbox[name=filter]:checked").map(function() {
    return this.value;
  }).get();

  console.log(flags);
})

<script src="https://ajax.googleapis./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>

You can declare flags variable outside the function so that each selected checkbox value can be pushed to the array.

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

<script src="https://ajax.googleapis./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>

Please try this.

var flags;
$("input[name=filter]").on("click",function(){
    var ul = $(this).parent().parent();
    flags = ul.find("input:checked").map(function(){return this.value});
})

If you use delegated event handler, you can use the delegateTarget property of the event object:

event.delegateTarget

The element where the currently-called jQuery event handler was attached.

You can then use this delegateTarget to restrict your search of checkboxes, using find.

Example:

$("ul.dropdown-list").on("click", "input:checkbox[name=filter]:checked", function(e) {
    //console.log(e.target); /* input:checked */
    //console.log(e.delegateTarget); /* ul.dropdown-list */
    var checkedBoxes = $(e.delegateTarget).find("input:checkbox[name=filter]:checked");
    var selections = checkedBoxes.map((id, inp) => inp.value);
    console.log(selections.get());
})

<script src="https://ajax.googleapis./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>