切换第一组单选按钮时如何取消第二组不可见RadioButton的选中状态

这类逻辑可以直接写在onclick属性中，你代码不生效是因为存在多处语法和逻辑错误，具体问题和修正方案如下：

现存问题 #

• 重复声明onclick属性：同一个标签内写了两次onclick，后声明的逻辑会被浏览器直接忽略，对应代码根本不会执行
• 选择器语法错误+ASP.NET控件ID渲染规则问题：
  1. ID选择器需要加#前缀，你写的$('rbtn3')本身就匹配不到任何元素
  2. ASP.NET Web Forms的服务端控件渲染到前端时，ID会自动拼接父容器前缀，除非特殊配置，否则前端实际ID和你服务端写的rbtn3并不一致
• jQuery对象操作错误：$()返回的是jQuery封装对象，没有原生DOM的checked属性，需要用jQuery提供的.prop()方法操作选中状态

修正方案 #

方式1：固定服务端控件ID，直接写在onclick内 #

给所有asp:RadioButton加ClientIDMode="Static"配置，保证前端渲染后的ID和服务端声明一致，再修正onclick写法：

<asp:RadioButton ID="rbtn1" runat="server" ClientIDMode="Static" 
  onclick="$('#spanOne').show();$('#spanTwo').hide();$('#rbtn3').prop('checked', false);" />

<asp:RadioButton ID="rbtn2" runat="server" ClientIDMode="Static" 
  onclick="$('#spanOne').hide();$('#spanTwo').show();$('#rbtn4').prop('checked', false);" />


<span id = "spanOne"> 
<asp:RadioButton ID="rbtn3" runat="server" ClientIDMode="Static" />
</span>

<span id = "spanTwo"> 
<asp:RadioButton ID="rbtn4" runat="server" ClientIDMode="Static" />
</span>

方式2：动态获取渲染后ID（无需修改ClientIDMode） #

直接在属性内用服务端语法输出控件的实际渲染ID：

<asp:RadioButton ID="rbtn1" runat="server" 
  onclick="$('#spanOne').show();$('#spanTwo').hide();$('#<%= rbtn3.ClientID %>').prop('checked', false);" />

<asp:RadioButton ID="rbtn2" runat="server" 
  onclick="$('#spanOne').hide();$('#spanTwo').show();$('#<%= rbtn4.ClientID %>').prop('checked', false);" />

优化建议 #

如果后续第二组的单选按钮数量变多，不用逐个指定ID清除选中，直接在隐藏对应容器的时候统一清空容器内所有单选的选中状态即可：

// 示例：隐藏spanOne的时候清空内部所有单选选中状态
$('#spanOne').hide().find('input[type="radio"]').prop('checked', false);

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