jQuery: Trigger even when checkbox gets checked

Question

I am making a web app. In one part, I have a checklist dynamically generated with javascript.

I want to have a jQuery function executed when the checklist is checked.

Here is the code that dynamically generated the checklist:

var checkbox = document.createElement("input");
    checkbox.setAttribute("type","checkbox");
    checkbox.setAttribute("class", "tickbox");
    document.getElementById("sortable").appendChild(checkbox);

Here is the output HTML file on execution, that shows that the checkbox was actually created:

<input type="checkbox" class="tickbox">

I want to have a function executed when the box is checked. I have tried:

1.

 $('.tickbox').change(function () {
        alert("Here");
        if ($(this).attr("checked")) {
        alert("Yeah");
        }

2.

if($(.tickbox).is(':checked')){
      alert("Yeah!!!");

3.

$('.tickbox').each(function(){
    if($(this).is(':checked')){
      alert("Yeah!!!");
   }
   })

But nothing worked. What's wrong? What should I do?

Note: A lot of other javaScript and jQuery, including many other function calls are working completely fine.

Dipesh Parmar · Accepted Answer · 2013-12-25 07:55:32Z

2

You said you have dynamically added checkbox so in order to add event handler to that DOM you has to use .on().

Example.

$(document).on('change','.tickbox',function(){
   if($(this).is(':checked')){
      alert("Yeah!!!");
   }
})

answered Dec 25, 2013 at 7:55

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

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

Comments

ryanlutgen · Accepted Answer · 2013-12-25 07:57:37Z

1

Try this....

var checkbox = document.createElement("input");
    checkbox.setAttribute("type","checkbox");
    checkbox.setAttribute("class", "tickbox");
    document.getElementById("sortable").appendChild(checkbox);
$(".tickbox").click(function(){
   if ($(this).is(':checked')) {
       alert("checked");
   }
});

Example: http://jsfiddle.net/7xY8Y/

answered Dec 25, 2013 at 7:57

ryanlutgen

3,1011 gold badge23 silver badges31 bronze badges

1 Comment

coder Over a year ago

Working fine when only one checkbox present but not with multiple. I am actually using multiple checkboxes.

Zaheer Ahmed · Accepted Answer · 2013-12-25 08:08:31Z

0

for dynamically generated element you need to use on():

$(document).on("change",'.tickbox',function () {
   if ($(this).attr("checked")) {
   alert("Yeah");
 }
});

because your tickbox created dynamically then you need to bind event on document for class name tickbox for change event.

edited Dec 25, 2013 at 8:08

answered Dec 25, 2013 at 7:54

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

jQuery: Trigger even when checkbox gets checked

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related