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

我使用下面的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脚本绑定到

document.ready（）

尝试以下操作：

$("body").on('click',input:checkbox,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);
    }
});

$(".ChekMarkWrap").delegate('click','input:checkbox',function () {
    //your functionality
});

添加新内容时，需要将其附加到DOM中

但您可以将加载DOM后未添加的父元素作为目标，以便能够使用并传递选择器引用/附加事件，就像我在代码的第一行中所写的那样。

尝试如下：

$("body").on('click',input:checkbox,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);
    }
});

$(".ChekMarkWrap").delegate('click','input:checkbox',function () {
    //your functionality
});

添加新内容时，需要将其附加到DOM中

---

但您可以将加载DOM后未添加的父元素作为目标，以便能够使用并传递选择器引用/附加事件，正如我在上面代码的第一行中所写的那样。

您应该使用委派事件。您的代码正在

文档就绪

上运行。没有什么是与新元素绑定的

$("your-form-selector").on('click', ':checkbox', function(){
//your code here.
});

---

您应该使用委派事件。您的代码正在

文档就绪

上运行。没有什么是与新元素绑定的

$("your-form-selector").on('click', ':checkbox', function(){
//your code here.
});

小提琴：

该方法仅绑定

click

事件一次，因此在该代码运行后添加的元素将不会绑定事件。您需要做的是设置一个侦听器，如下所示：

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

在小提琴中，我将复选框包装成一个

表单#exampleForm

，并用它替换了上面示例中的

body

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

fiddle:

该方法仅绑定

click

事件一次，因此在该代码运行后添加的元素将不会绑定事件。您需要做的是设置一个侦听器，如下所示：

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

在小提琴中，我将复选框包装成一个

表单#exampleForm

，并用它替换了上面示例中的

body

---

编辑：更新了添加更多复选框的实时示例。您可以尝试使用代理。大概是这样的：

$("body").on('click',input:checkbox,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);
    }
});

$(".ChekMarkWrap").delegate('click','input:checkbox',function () {
    //your functionality
});

---

仅供参考：

您可以尝试使用委托。大概是这样的：

$("body").on('click',input:checkbox,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);
    }
});

$(".ChekMarkWrap").delegate('click','input:checkbox',function () {
    //your functionality
});

---

仅供参考：

委托

在jQuery 1.7中不推荐使用。

委托

在jQuery 1.7中不推荐使用。这将不起作用<必须对父元素调用code>on，以在添加新元素时维持绑定。是的。在您的示例中，您假设“.ChekMarkWrap”也是动态插入的，我没有。我们不知道OP的标记。无论如何，我会改成

$（“body”）

，这样更安全。真的，真的。不过，这是合理的假设，不是吗？：）Sant@NicklasNygren，helt rätt！och det var jag som tänkte fel pådin kod först，抱歉：）这不起作用<必须对父元素调用code>on，以在添加新元素时维持绑定。是的。在您的示例中，您假设“.ChekMarkWrap”也是动态插入的，我没有。我们不知道OP的标记。无论如何，我会改成

$（“body”）

，这样更安全。真的，真的。不过，这是合理的假设，不是吗？：）Sant@NicklasNygren，helt rätt！och det var jag som tänkte fel pådin kod först，对不起：）Ska vi radera detta？为什么不使用设计用于此目的的

元素？为什么不使用设计用于此目的的

元素？