Detect checkbox checked unchecked with jQuery

Question

I'm trying to detect when a checkbox is checked or unchecked in jQuery. I'm creating the checkboxes dynamically from JSON content. This is how they are created:

$.each(data.modifierOptions, function(key, item) {
                            var checkBox = "<input type='checkbox' class='modifier' data-name='" + item.Name + "' + data-price='" + item.Price + "' name='" + item.Name + "' value='" + item.ID + "'/>" + item.Name + "<br/>";
                            $(checkBox).appendTo('#modifiersDiv');
                        });

Now, viewing the source of the body I'm getting this:

enter image description here

Finally, I'm trying to get the checked/unchecked event with this jQuery event, but nothing happens:

$('input:checkbox.modifier').change(function () {
            var sThisVal = (this.checked ? $(this).val() : "");
        });

How can I solve this?

Update

I want to get the event by checkbox class.

use mousedown() event listener instead of change().

CJ Ramki
– CJ Ramki

2014-04-17 16:13:59 +00:00
Commented Apr 17, 2014 at 16:13 — CJ Ramki
– CJ Ramki, Commented Apr 17, 2014 at 16:13
This is asked hundred times a week, at least...

A. Wolff
– A. Wolff

2014-04-17 16:23:44 +00:00
Commented Apr 17, 2014 at 16:23 — A. Wolff
– A. Wolff, Commented Apr 17, 2014 at 16:23

Maurice Perry · Accepted Answer · 2014-04-17 16:18:50Z

4

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .click()

As you are adding a content dynamically you should use,

$(document).on('change', 'input:checkbox.modifier',  function () {
     var sThisVal = (this.checked ? $(this).val() : "");
});

Read about delegating events.

edited Apr 17, 2014 at 16:18

Maurice Perry

32.8k9 gold badges72 silver badges97 bronze badges

answered Apr 17, 2014 at 16:13

Deepak Ingole

15.9k10 gold badges49 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maurice Perry · Accepted Answer · 2014-04-17 16:15:47Z

1

As you create dynamically the checkboxes, you would have to setup the event handler like this:

$(document).on("change", "input[type='checkbox'].modifier", function () {
    var sThisVal = (this.checked ? $(this).val() : "");
});

answered Apr 17, 2014 at 16:15

Maurice Perry

32.8k9 gold badges72 silver badges97 bronze badges

1 Comment

Deepak Ingole Over a year ago

Thanks for edit ..Habit of writing jquery selector inside "" gonna hung me someday..

Maurice Perry · Accepted Answer · 2014-04-17 16:18:28Z

1

Try to code using on event

 $(document).on('change', 'input:checkbox.modifier',  function () {
        var sThisVal = $(this).is(':checked') == true ? $(this).val() : "";
    });

edited Apr 17, 2014 at 16:18

Maurice Perry

32.8k9 gold badges72 silver badges97 bronze badges

answered Apr 17, 2014 at 16:15

sshet

1,1541 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Detect checkbox checked unchecked with jQuery

Update

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related