Dynamically attach checked event on checkBox using JQuery

Question

i have a checkBox generated at runtime using a for loop, now i want to attach checked event for each checkboxes... how to implement the same in jquery.

i am using tables.. td.. for adding checkBox.

<script>
var genTable = "<table border='1' style='border-collapse:collapse' cellpadding='5' width='100%'><thead><tr><td><input type='checkBox' id='mainCheck' /></td><td>ID</td><td>ArticleTitle</td><td>ArticleDate</td></tr></thead>";
for (i = 0; i < result.length; i++) {
                    if (result[i].IsImageAvailable == "TRUE") {
                        iChecked = "";
                    }
                    else {
                        iChecked = "disabled = disabled";
                    }
                    genTable += "<tr><td width='2%'>
<!--Here is my checkBox on which i want to attach checked event-->
<input type='checkBox' id='chkBox" + i + "' onchange='FillSecondGrid(" + result[i].ArticleID + ")' />

</td><td width='5%'>" + result[i].ArticleID + "</td><td>" + result[i].ArticleTitle + "</td><td width='5%'>" + result[i].ArticleDate + "</td></tr>";
                }
                genTable += "</tbody></table>";
                document.getElementById("gridFirst").innerHTML = genTable;
</script>

Do you mean the checkboxes are adding to page after the initial page load (AJAX)? — Alex
– Alex, Commented Aug 19, 2011 at 18:04
i have updated my question with the code... hope it help you guys to resolve my issue, and yes this is getting called on document.ready Jquery event. — Abbas
– Abbas, Commented Aug 19, 2011 at 18:12
In newer versions of JQuery (>1.7) use .on() instead (api.jquery.com/on). — BasTaller
– BasTaller, Commented Jan 31, 2012 at 21:38

Alex · Accepted Answer · 2014-05-07 14:52:38Z

3

As you're generating the checkbox markup in script tags, you can just add the onchange event after the checkbox generation:

<script>
  // .. checkbox generation here ..
  $('table').find('input[type=checkbox]').change(function () { /* do things on change here */ });
</script>

Or, alternatively, just use .on on all checkbox elements on document ready:

$(function () {
  // on document ready..
  $('table input[type=checkbox]').on('change', function() { /* do things on change here */ });
}

The .on method will catch any new checkboxes created after document ready (as well as those already present) and attach your onchange event.

edited May 7, 2014 at 14:52

answered Aug 19, 2011 at 18:17

Alex

9,5011 gold badge41 silver badges45 bronze badges

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

1 Comment

CaffeineShots Over a year ago

for future viewer .live is remove since jquery 1.9 just change to .on and that will do.

Ally · Accepted Answer · 2012-07-20 09:22:28Z

No answers here have passed the event in, which you need to find out if the checkbox is checked or not. Here is a cross browser snippet that attaches the event to all the check boxes that are a child of the given element and works out when the checkbox is clicked if it is on or off.

var checkboxes = $(element).find("input[type=\"checkbox\"]");
$(checkboxes).change(function (event) {
    // These two lines compensate for getting the event and checkbox when in ie.
    if (!event) { var event = window.event; }
    var checkbox = event.target || event.srcElement;
    if (checkbox.checked)
        alert("Checkbox is checked");
    else
        alert("Checkbox is not checked");
});

I don't think the two ie compensating lines are actually needed for jQuery events, but useful to put there so that your code will work with none jQuery events as well.

legendofawesomeness · Accepted Answer · 2011-08-19 18:03:41Z

0

You can use live() for that. Here is an example (please check for syntax etc.):

$('.someclassforyourcheckbox').live('change', function(){//do your stuff})

answered Aug 19, 2011 at 18:03

legendofawesomeness

2,9212 gold badges21 silver badges32 bronze badges

Comments

Rafay · Accepted Answer · 2011-08-19 18:23:44Z

0

add a class to your checkbox

<input class="dynChk" type='checkBox' id='chkBox" + i + "' onchange='FillSecondGrid(" + result[i].ArticleID + ")' />

and then use delegate or live

$("table").delegate(".dynChk",'change',function(){
//your code
});

with live

$(".dynChk").live("change",function(){
//your code
});

answered Aug 19, 2011 at 18:23

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Collectives™ on Stack Overflow

Dynamically attach checked event on checkBox using JQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related