IE浏览器中Radio按钮点击Confirm弹窗取消后失选问题求解

我之前也碰到过这个IE独有的兼容性问题——Trinidad生成的单选按钮组件，在点击弹出的confirm对话框并选择“取消”后，所有单选按钮的选中状态会被清空。这是因为IE对单选按钮onclick事件返回false的处理逻辑和其他浏览器不同，它不仅会阻止默认行为，还会强制取消当前单选的选中状态。

下面给你两种可行的解决办法：

方法一：直接修改onclick逻辑，恢复选中状态 #

把组件的onclick属性替换成以下代码，先记录当前选中的单选按钮，在用户取消确认后恢复它的选中状态：

<tr:selectOneRadio id="selectOperacion" value="#{myBean.operacion}" autoSubmit="true" valueChangeListener="#{myBean.myChangeListener}" 
onclick="var checkedRadio = document.querySelector('input[name=selectOperacion]:checked'); if (!confirm('test')) { setTimeout(function(){ checkedRadio.checked = true; }, 0); return false; }" >
    <f:selectItems value="#{myBean.options}" />
</tr:selectOneRadio>

这里用setTimeout延迟执行恢复操作，是为了绕过IE的即时状态重置逻辑，确保选中状态能正确恢复。

方法二：使用Trinidad客户端事件监听（更推荐） #

这种方式更贴合Trinidad的组件模型，也更健壮。通过tr:clientListener绑定自定义的点击处理函数：

<tr:selectOneRadio id="selectOperacion" value="#{myBean.operacion}" autoSubmit="true" valueChangeListener="#{myBean.myChangeListener}" >
    <f:selectItems value="#{myBean.options}" />
    <tr:clientListener type="click" method="handleRadioClick" />
</tr:selectOneRadio>

<script type="text/javascript">
function handleRadioClick(event) {
    var radioComp = event.getSource();
    // 获取当前已选中的单选按钮
    var checkedRadio = document.querySelector('input[name=' + radioComp.getName() + ']:checked');
    
    if (!confirm('test')) {
        // 取消组件的默认行为
        event.cancel();
        // 延迟恢复选中状态
        setTimeout(function(){
            if (checkedRadio) {
                checkedRadio.checked = true;
            }
        }, 0);
    }
}
</script>

如果你的组件嵌套在命名容器（比如tr:form或tr:panelGroupLayout）中，单选按钮的name属性会包含容器的id前缀，这时候可以把选择器改成input[name$=selectOperacion]:checked，用后缀匹配来准确找到目标元素。

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