jQuery .on() click 只正确运行一次

Question

我创建了以下小代码来复制我实际面临的问题。当我第一次单击“全选”按钮时，它工作正常。同样，当我单击“选择无”按钮时，它工作正常。但是当我再次单击“全选”时，它不起作用。同样，如果我 .empty() div 并使用“单击我”按钮重新填充它。两个按钮仅在第一次工作。我的jQuery代码如下：

$("#populate").click(function() {
   $("#populateme").empty();
   $("#populateme").html("<input type=checkbox name=tester1 class=tester value=1><input    type=checkbox name=tester2 class=tester value=2><input type=checkbox name=tester2  class=tester value=3><input type=button name=selectall id=selectall value=selectall><input  type=button name=selectnone id=selectnone value=selectnone>");
});
$(document).on("click","#selectall",function() {
   $(".tester").attr("checked",true);
});
$(document).on("click","#selectnone",function() {
   $(".tester").attr("checked",false);
});

您可以通过以下链接预览问题：http://jsfiddle.net/RHFMT/1/

Answer 1

使用prop 而不是attr 来设置和清除checked 状态，如下所示：

$(document).on("click","#selectall",function() {
    $(".tester").prop("checked",true);
});
$(document).on("click","#selectnone",function() {
    $(".tester").prop("checked",false);
});

在此处查看更多详细信息：Setting "checked" for a checkbox with jQuery?