Add events to multiple checkboxes in multiple places in the DOM

Question

I have multiple sections created dynamically and need to add an event listener to the following check boxes. Note: I don't want to select all the checkboxes, just those wrapped in the specified DIV tags (which are created dynamically in code I cannot modify).

EDIT: (as this question was INCORRECTLY marked as a duplicate) I do not want to add events to elements as more elements are dynamically added to the page. I am trying to add an event to multiple sections of the DOM when the page first loads. (Found the link to dispute the duplicate and it wants me to change something)

EDIT: (For the 2nd INCORRECTLY marked as a duplicate question) That 2nd duplicate link still does not apply. I already know how to attach an event to the HTML as .addEventListener will work, I am looking to FIND all the relevant checkbox/elements scattered through the DOM and then loop through them to add the event. Please read the entire question before marking it down.

  <div class="keep-open btn-group" title="Add Listener">
         <ul class="dropdown-menu" role="menu"><li><label><input type="checkbox" data-field="1" value="0" checked="checked"> Category</label></li>
          <li><label><input type="checkbox" data-field="2" value="1" checked="checked"> Item 1</label></li>
          <li><label><input type="checkbox" data-field="3" value="2" checked="checked"> Item 2</label></li>
          <li><label><input type="checkbox" data-field="4" value="3" checked="checked"> Item 3</label></li>
         </ul>
        </div>
  
        <label>
   <input type="checkbox" checked="checked"> Not this checkbox
  <label>

        <div class="keep-open btn-group" title="Add Listener to 1 of many">
         <ul class="dropdown-menu" role="menu"><li><label><input type="checkbox" data-field="1" value="0" checked="checked"> Category</label></li>
          <li><label><input type="checkbox" data-field="2" value="1" checked="checked"> Item 4</label></li>
          <li><label><input type="checkbox" data-field="3" value="2" checked="checked"> Item 5</label></li>
          <li><label><input type="checkbox" data-field="4" value="3" checked="checked"> Item 6</label></li>
         </ul>
        </div>

The following gives me over a dozen sections (in the real code) to add event listeners to:

    var theBoxSections = document.getElementsByClassName("dropdown-menu");

This bit of code doesn't work, but will give an idea of what I am looking for:

    $('#dropdown-menu input[type="checkbox"]').addEventListener("change", function () {
        alert("Checkbox clicked")
    });

I have come close with .addEventListener, yet struggling to get all the relevant checkboxes from multiple sections of the DOM.

Muhammad Omer Aslam · Accepted Answer · 2018-01-06T00:28:28.990

EDIT

As you edited your question you have the class not id with dropdown-menu and you should use . rather than # to select all of the ul with the class name dropdown-menu so you should use.

$(document).on('change', '.dropdown-menu input[type="checkbox"]', function() {
  alert("Checkbox clicked");
});

use event delegation for dynamically created checkboxes I removed one div to show you the example to add a new checkbox and check by changing its state if it outputs in the console

$(document).on('change', '.keep-open input[type="checkbox"]', function() {
  console.log('checked', $(this).is(':checked'));
});

$("#add").on('click', function() {
  var count = $('.keep-open>ul li').length;
  $('.keep-open>ul').append('<li><input type="checkbox" checked="checked"> new item ' + count + '</label></li>')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="keep-open btn-group" title="Add Listener">
  <ul class="dropdown-menu" role="menu">
    <li><label><input type="checkbox" data-field="1" value="0" checked="checked"> Category</label></li>
    <li><label><input type="checkbox" data-field="2" value="1" checked="checked"> Item 1</label></li>
    <li><label><input type="checkbox" data-field="3" value="2" checked="checked"> Item 2</label></li>
    <li><label><input type="checkbox" data-field="4" value="3" checked="checked"> Item 3</label></li>
  </ul>
</div>

<label>
        <input type="checkbox" checked="checked"> Not this checkbox
    <label>
<div>

<input type="button" id="add" value="add" />
</div>

I like the direction this is going, however the problem I have is that I cannot change the HTML code. I actually have more than a dozen DIV sections to pull checkboxes from. I have edited the question to give more information. — thefid, Jan 05 '18 at 23:32
as far as you have the same `class` applied to the parent `div` this would work without any change, you will have to target all the `div` by using some thing common in them. — Muhammad Omer Aslam, Jan 05 '18 at 23:34
I have updated my question with more code to define what I am looking for. — thefid, Jan 05 '18 at 23:46
@thefid just updated the answer for you please see the edit section — Muhammad Omer Aslam, Jan 06 '18 at 00:28
Thank you! That worked perfectly on the targeted checkboxes.. — thefid, Jan 08 '18 at 16:39

score 1 · Answer 2 · answered Jan 05 '18 at 23:13

1

This problem is handled via a technique called "event delegation". You'll need to listen on some parent node (one that exists when you call addEventListener) for a broad set of checkboxes events. Events from any checkboxes inside bubble up into your listener. You can then test the event.target to figure out if the events happened on the subset of checkboxes you're interested in.

Without jQuery: https://davidwalsh.name/event-delegate

With jQuery: https://learn.jquery.com/events/event-delegation/

Relevant, in-depth answer: https://stackoverflow.com/a/29367737/126963

answered Jan 05 '18 at 23:13

Olex Ponomarenko

905
7
10

Now that I got the script working and reviewed this answer again, it made a lot more sense. This answer is also correct. – thefid Jan 08 '18 at 17:19
If you would have had a snippet of code with this answer, I would have marked it as the answer. – thefid Jan 08 '18 at 17:55

Add events to multiple checkboxes in multiple places in the DOM

2 Answers2