如何实现Asp.Net RadioButton点击时弹出客户端确认弹窗？

需求：在ASP.NET页面中，拦截asp:RadioButton的点击事件，弹出确认弹窗。用户选择“确定”则选中当前按钮；选择“取消”则保持单选组原选中状态，全程在客户端实现。

修改后的ASPX控件代码 #

移除控件自带的OnClick属性，改用jQuery统一绑定事件：

<div>
  <asp:RadioButton ID="rbtn1" runat="server" GroupName="Group1" Text="Button1" />
  <asp:RadioButton ID="rbtnN2" runat="server" GroupName="Group1" Text="Button2" />
</div>

jQuery实现脚本 #

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
    // 初始化保存当前单选组的选中值
    let currentChecked = $("input[name='Group1']:checked").val();

    // 绑定Group1下所有单选按钮的点击事件
    $("input[name='Group1']").on("click", function(e) {
        // 弹出确认对话框
        if (confirm("确定要切换选项吗？")) {
            // 用户确认，更新保存的选中值
            currentChecked = $(this).val();
        } else {
            // 用户取消，恢复之前的选中状态
            $("input[name='Group1'][value='" + currentChecked + "']").prop("checked", true);
            // 阻止当前按钮的默认选中行为
            e.preventDefault();
        }
    });
});
</script>

核心逻辑说明 #

• 页面加载完成时，先记录单选组当前的选中值，作为状态备份。
• 点击单选按钮时触发确认弹窗：
  • 若用户点击“确定”，更新备份的选中值，允许当前按钮选中。
  • 若用户点击“取消”，将备份的原选中按钮重新设为选中状态，并阻止当前按钮的默认选中行为。

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