将脚本绑定到单选按钮:奇怪的行为:不按名称绑定

Binding Script to Radio Buttons : Weird Behaviour : Not Binding by Name

本文关键字：绑定 脚本 单选按钮      更新时间：2023-09-26

在我的 mvc 应用程序中，我将相同的函数绑定到这两个单选按钮。

$('#Fra').bind('change', function () {
    f_GC();
});
$('#Hea').bind('change', function () {
    f_GC();        
});

这几行的工作方式是 Fra 有 2 个具有相同名称/ID 的单选按钮（不同的值）。Hea 有 4 个具有相同名称/ID 的单选按钮（不同的值）......

我的理解是，所有属于 Fra、/Hea 的 ID 都会绑定到函数......

这些工作的时间最长，我一定更改了一些代码......但是，要让所有 6 个单选按钮运行这些功能，我现在必须像这样绑定它们......

$('input:radio[name=Fra][value=' + 1 + ']').bind('change', function () {
    f_GC();  
});
$('input:radio[name=Fra][value=' + 2 + ']').bind('change', function () {
    f_GC();  
});
$('input:radio[name=Hea][value=' + 1 + ']').bind('change', function () {
    f_GC();  
});
$('input:radio[name=Hea][value=' + 2 + ']').bind('change', function () {
    f_GC();  
});
$('input:radio[name=Hea][value=' + 3 + ']').bind('change', function () {
    f_GC();  
});
$('input:radio[name=Hea][value=' + 4 + ']').bind('change', function () {
    f_GC();  
});

对于这种行为有简单的解释吗？chrome 调试工具在 2 个配置中的任何一个中都没有显示 JS 错误。

尝试按名称更新所有字段很简单。

$('input:radio[name=Hea]').on('change', function () {
    f_GC();
});

可能有许多不同的方法可以做到这一点，但这种方法将起作用:)

希望这有帮助。

jQuery doc 说 ID 选择器："每个 id 值只能在文档中使用一次。如果为多个元素分配了相同的 ID，则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。

如果您不想更改 ID，那么另一种解决方案是将事件侦听器添加到列表的父元素并使用"委托"样式的事件附件。然后，在事件处理程序中，可以查询触发事件的元素的 id 并采取相应的操作。

相关文章：