javascript - 动态添加复选框时，用于从组中选择一个复选框的 JQuery 脚本不起作用

Question

我使用下面的 jquery 脚本来禁止用户一次选择多个同名复选框

 $("input:checkbox").click(function () {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

这是复选框

 <div class="ChekMarkWrap">
  <input id="chkFilm_4" type="checkbox" name="four" style="margin-left:2px;" /><br />film
 </div>

 <div class="ChekMarkWrap">
  <input id="chkTv_4" type="checkbox" name="four" /><br />tv
 </div>

 <div class="ChekMarkWrap">
  <input id="chkWeb_4" type="checkbox" name="four" /><br />web
 </div>

 <div class="ChekMarkWrap">
  <input id="chkStage_4" type="checkbox" name="four" /><br />stage
 </div>

它工作得很好，直到我动态添加一个新的复选框。我将上面的 jquery 脚本绑定(bind)到 document.ready()

Answer 1

fiddle :http://jsfiddle.net/3hcFp/2/

该方法仅绑定(bind)一次 click 事件，因此在该代码运行后添加的元素将不会绑定(bind)该事件。您需要做的是设置一个监听器，如下所示:

$('body').on('click', 'input:checkbox', function () {
    // Do some stuff
}

在 fiddle 中，我将复选框包装在 form#exampleForm 中，并用它替换了上面示例中的 body。

编辑:使用添加更多复选框的实时示例更新了 fiddle 。