通过jQuery更新RadioButton时checked属性与选中状态不一致问题

我之前在做ASP.NET项目的时候也碰到过一模一样的问题！ASP.NET的服务器端RadioButton控件因为和视图状态、客户端脚本耦合得比较紧，直接用jQuery改选中状态很容易出现“UI显示对了，但实际属性/PostBack失效”的坑，咱们来一步步捋清楚原因和解决方案：

问题根源分析 #

1. 单选按钮组的互斥性：同一GroupName的RadioButton，浏览器会自动管理互斥状态——选中其中一个时，同组其他按钮会自动取消选中。你手动设置rdOne、rdTwo为false的操作其实是多余的，反而可能干扰浏览器的默认行为。
2. HTML属性 vs DOM状态：你在开发者工具里看到的checked="checked"是页面初始渲染的HTML属性，而动态修改的是DOM元素的checked状态（这才是浏览器判断选中状态的依据）。可以在控制台执行$("#rdTwo")[0].checked查看真实状态，而不是盯着HTML属性看。
3. AutoPostBack的触发条件：ASP.NET的AutoPostBack="true"依赖客户端的change事件来触发__doPostBack函数。如果只是用JS修改了选中状态但没触发change事件，ASP.NET的客户端脚本会认为状态没变化，导致后续点击无法触发回发。

解决方案 #

方案1：简化代码并触发change事件 #

这是最直接的解决方式，利用浏览器的单选组互斥特性，只需要设置目标按钮为选中，再手动触发change事件让ASP.NET感知状态变化：

method12 = function () { 
    // 直接设置目标单选按钮为选中，浏览器自动取消同组其他按钮
    $("#rdThree").prop("checked", true).trigger("change");
}

方案2：直接操作DOM元素（兼容旧版jQuery） #

如果你的项目用的是较老版本的jQuery（比如1.6之前），prop方法的行为可能和attr混淆，这时候可以直接操作DOM元素的checked属性：

method12 = function () { 
    // 获取原生DOM元素修改选中状态
    document.getElementById("rdThree").checked = true;
    // 触发change事件，确保ASP.NET能捕捉到状态变化
    $("#rdThree").trigger("change");
}

额外注意事项 #

• 永远不要手动取消同组其他单选按钮的选中状态，浏览器会自动处理这个逻辑，多此一举反而容易出问题。
• 测试状态时，优先用控制台查看DOM的checked属性，而不是开发者工具里的HTML代码（那是初始值，不会动态更新）。
• 如果还是存在PostBack失效的情况，可以检查页面是否有其他JS代码覆盖了RadioButton的change事件绑定。

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