MVC中Razor生成的动态单选按钮绑定JS/JQuery事件求助

看起来你在处理Razor生成的动态单选按钮时遇到了事件绑定的坑，我来帮你一步步梳理问题并解决：

问题分析 #

你当前的JS代码存在几个关键问题：

• 选择器错误：你写的$("input:radio[name='\\[0\\].Used']")转义方式不对，而且循环里固定用[0]，没有利用变量i匹配对应行的单选按钮，自然无法正确绑定目标元素。
• 值判断错误：Razor生成的单选按钮value是字符串类型的"true"和"false"，但你用布尔值true/false去做全等比较，永远不会匹配，所以alert不会触发。
• 事件绑定时机：如果JS代码在DOM加载完成前执行，或者没有针对动态元素用事件委托，也会导致事件无响应。

修复后的代码方案 #

方案1：事件委托（推荐，适配动态生成元素） #

不需要循环，直接给静态父容器绑定事件，通过事件冒泡处理所有动态生成的单选按钮：

// 确保DOM加载完成后执行
$(document).ready(function() {
    // 绑定所有.Used单选按钮的change事件
    $(document).on('change', 'input:radio[name$=".Used"]', function() {
        // 注意比较字符串值
        if ($(this).val() === "true") {
            alert("True");
        } else {
            alert("False");
        }
    });

    // 如果需要处理.Sold单选按钮，同理：
    $(document).on('change', 'input:radio[name$=".Sold"]', function() {
        if ($(this).val() === "true") {
            alert("Sold: True");
        } else {
            alert("Sold: False");
        }
    });
});

方案2：循环绑定（需确保DOM已加载完成） #

如果你坚持用循环绑定，修正选择器和值判断逻辑：

$(document).ready(function() {
    // 转成数字类型避免循环异常
    var drugUseCount = parseInt(document.getElementById("DrugUseCount").innerHTML); 
    for (var i = 0; i < drugUseCount; i++) { 
        // 正确拼接对应索引的name选择器
        $("input:radio[name='[" + i + "].Used']").on('change', function() { 
            if ($(this).val() === "true") { 
                alert("True"); 
            } else {
                alert("False"); 
            } 
        }); 
    }
});

额外优化建议 #

• 用change事件代替click事件，更适配单选按钮的状态切换（比如键盘切换选项时也能触发）。
• 事件委托尽量找最近的静态父容器（比如包裹所有表单行的div），不要直接用document，能提升性能。
• 可以给每个动态表单行加统一类名（比如drug-form-row），方便后续更精准地定位元素。

内容的提问来源于stack exchange，提问作者Camrat