CODEWITHSUNDEEP
javascriptjqueryhtml
ankur
ankur

Reputation: 69

How to get the checked checkboxes of a particular 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.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>

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.

Upvotes: 5

Views: 3473

Answers (5)

Lie Ryan
Lie Ryan

Reputation: 64913

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

Upvotes: 0

athi
athi

Reputation: 1683

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

Upvotes: 1

Taha Paksu
Taha Paksu

Reputation: 15616

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.

Upvotes: 4

Harry Bomrah
Harry Bomrah

Reputation: 1668

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337656

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

Upvotes: 2

Related Questions