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>

Answer 1

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.