Wizard单选按钮选中状态失效且无法提交数据问题求助

算力阿峰

2026-5-25

解决Wizard单选按钮选中状态失效与表单提交数据无法获取的问题

我一眼就看出问题出在你操作单选按钮选中状态的方式上——用attr()来设置checked属性是踩了jQuery操作表单元素的经典坑！

问题根源

对于单选框、复选框这类表单元素，浏览器识别它们的选中状态是基于DOM元素的固有属性，而不是HTML标签上写的属性。你用attr('checked','true')只是给HTML标签加了一个属性，但并没有真正更新DOM的选中状态；同理removeAttr('checked')也没法正确取消选中。这就导致页面上看起来有active类，但表单提交时浏览器根本认不出哪个单选框是选中的。

修正后的完整代码

把你原来的事件处理代码替换成下面这段，就能解决两个问题：

$('[data-toggle="wizard-radio"]').off('click').on('click', function(e) {
    // 阻止原生单选框的默认点击行为，避免状态冲突
    e.preventDefault();
    
    const wizardCard = $(this).closest('.wizard-card');
    
    // 更新视觉上的active类
    wizardCard.find('[data-toggle="wizard-radio"]').removeClass('active');
    $(this).addClass('active');
    
    // 正确同步单选框的选中状态（用prop而不是attr）
    wizardCard.find('[type="radio"]').prop('checked', false);
    $(this).find('[type="radio"]').prop('checked', true);
});

关键改动说明

用prop()替代attr()：prop('checked', true/false)直接操作DOM元素的选中状态，这是jQuery官方推荐的操作表单元素状态的方式，表单提交时浏览器能正确识别这个状态。
避免重复绑定事件：off('click').on('click')确保不会因为脚本重复加载导致事件多次触发，避免状态混乱。
阻止默认行为：e.preventDefault()防止原生单选框的点击事件和自定义的wizard点击逻辑冲突，确保视觉状态和实际选中状态完全同步。