单选框值多次传递异常：首次正常后续返回'on'

嘿，我刚帮你排查了这个问题，其实根源是你在获取和设置单选框状态时混淆了「值」和「选中状态」的操作方式，导致首次传递正常，后续就变成了'on'。

问题原因分析 #

首次运行时，你可能正确获取了选中单选框的value属性值，但后续触发传递逻辑时，错误地把单选框的「选中状态属性值」（也就是on，这是操作DOM属性时容易踩的坑）当成了要传递的值，或者在设置单选框时用错了方法。

举个常见的错误例子：如果你的代码里写了类似$('input[name=group2]').attr('checked', selectedValue)，当selectedValue是正常选项值时，这行代码不会生效（因为checked属性只认布尔值或'on'），反而会把后续获取的值搞乱；或者你错误地用$('input[name=group1]:checked').attr('checked')来获取值，这返回的就是'on'而不是单选框的实际value。

正确的解决方案 #

你需要严格区分「获取选中值」和「设置选中状态」的操作：

1. 正确获取选中单选框的值

要用.val()来获取选中单选框的实际value属性值，而不是获取checked状态：

// 拿到第一组选中的单选框的值
const selectedValue = $('input[name="firstGroup"]:checked').val();

2. 正确设置下一组单选框的选中状态

要找到和选中值匹配的单选框，然后用.prop('checked', true)来设置它的选中状态（注意用prop而不是attr，因为checked是DOM元素的属性，不是HTML属性）：

// 找到第二组中value等于选中值的单选框，设置为选中
$(`input[name="secondGroup"][value="${selectedValue}"]`).prop('checked', true);

3. 避免重复绑定事件

还要检查你的代码是不是每次传递后都重新绑定了点击/改变事件，导致多次触发逻辑，把值覆盖成了'on'。如果是动态绑定事件，建议用事件委托或者确保只绑定一次，比如：

// 用事件委托避免重复绑定
$(document).on('change', 'input[name="firstGroup"]', function() {
  const selectedValue = $(this).val();
  $(`input[name="secondGroup"][value="${selectedValue}"]`).prop('checked', true);
});

这样修改后，不管是首次还是后续的传递，都会正确传递单选框的实际value，而不是'on'啦。

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