使用 JQuery 在复选框上动态附加选中的事件答案

【问题标题】：Dynamically attach checked event on checkBox using JQuery使用 JQuery 在复选框上动态附加选中的事件
【发布时间】：2014-05-07 22:52:38
【问题描述】：

我有一个在运行时使用 for 循环生成的复选框，现在我想为每个复选框附加选中的事件...如何在 jquery 中实现相同的。

我正在使用表格.. td.. 来添加复选框。

<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>

【问题讨论】：

您的意思是复选框在初始页面加载 (AJAX) 后添加到页面吗？
我已经用代码更新了我的问题...希望它能帮助你们解决我的问题，是的，这是在 document.ready Jquery 事件中调用的。
在较新版本的 JQuery (>1.7) 中使用 .on() 代替 (api.jquery.com/on)。

标签： jquery asp.net checkbox checked

【解决方案1】：

当您在script 标签中生成复选框标记时，您可以在生成复选框后添加onchange 事件：

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

或者，或者，只需在文档就绪的所有复选框元素上使用.on：

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

.on 方法将捕获在文档准备好之后创建的任何新复选框（以及已经存在的复选框）并附加您的 onchange 事件。

【讨论】：

对于未来的查看器 .live 已被删除，因为 jquery 1.9 只需更改为 .on 就可以了。

【解决方案2】：

这里没有答案已经传递了事件，您需要确定复选框是否被选中。这是一个跨浏览器 sn-p，它将事件附加到作为给定元素的子元素的所有复选框，并在复选框被单击时起作用，无论它是打开还是关闭。

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");
});

我不认为 jQuery 事件实际上需要这两条 ie 补偿行，但将它们放在那里很有用，这样您的代码也可以在没有 jQuery 事件的情况下工作。

【讨论】：

【解决方案3】：

你可以使用 live() 。这是一个例子（请检查语法等）：

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

【讨论】：

【解决方案4】：

在您的复选框中添加一个类

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

然后使用delegate 或live

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

live

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

【讨论】：