How to make event listener for changes in all and any check boxes in document with javascript/jquery?

Question

what I'd like is to be able to create an event listener for all and any check boxes in a document. Because check boxes and radio buttons will be added dynamically with JavaScript, rather then have a separate event listener for each one and just have a general event listener to check for changes in any checkbox with the jquery change function if that's possible of course. I know how to do this with one checkbox.

$('input[name=manybackgrounds]').change(function(){
if($(this).is(':checked'))
{
    alert("it is checked");
}
else
{
    alert("not checked");
}

});

But since their could be an unpredictable amount of checkboxes, it would be easier to check if any have changes and then just ask which dynamically made ones are checked. Thank you in advance, greatly appreciate any help.

See [Direct vs. Delegated - jQuery .on()](http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on) You want event delegation. — James Montagne, Mar 06 '14 at 19:45

Populus · Accepted Answer · 2014-03-06T19:51:17.087

0

The selector for all checkboxes is:

$('input[type=checkbox]')

Now do whatever you want with it!

Edit:

For dynamic checkboxes...

$(document).on('change', 'input[type=checkbox]', function(e) {
    //DO YOUR THANG
});

Read https://api.jquery.com/on/ for more info

edited Mar 06 '14 at 19:51

answered Mar 06 '14 at 19:45

Populus

7,470
3
38
54

@JamesMontagne it does now. – Blazemonger Mar 06 '14 at 19:54
1

@Blazemonger his comment was before the edit :) – Populus Mar 06 '14 at 19:54
In that case, comment redacted. (FYI, not my downvote) – James Montagne Mar 06 '14 at 19:56
Great, I tried it works well, and it seemes I can also use this to figure out exactly which check box was checked, which is exactly what I needed. Thanks – Alex Mar 06 '14 at 19:57

score 0 · Answer 2 · answered Mar 06 '14 at 20:01

As @JamesMontagne pointed out, you need to use event delegation. Make sure they are added in a container you can use, and then add the event handler on that container.

Supose you guarantee they are added in #container, you could do:

$("#container").on("click", "input[name=manybackgrounds]", function() { 
    if($(this).is(':checked'))
    {
        alert("it is checked");
    }
    else
    {
        alert("not checked");
    }    
});

src: http://api.jquery.com/on/

How to make event listener for changes in all and any check boxes in document with javascript/jquery?

2 Answers2