如何获取多组不同name/value单选按钮值及状态恢复异常问题

我看了你的代码，问题主要出在HTML的id重复和恢复选中状态的逻辑错误上，咱们一步步来修正：

首先说HTML的问题 #

你现在同一组里的所有单选按钮都用了同一个id（比如第一组全是id="radio1"），这违反了HTML规范——每个元素的id必须是唯一的！这会导致后续JS选择元素时混乱，根本定位不到正确的单选按钮。

你可以把id改成唯一的，比如按组名-值的格式命名：

<div>
  <input type="radio" id="radio1-A" name="1" value="A" />
  <input type="radio" id="radio1-B" name="1" value="B" />
  <input type="radio" id="radio1-C" name="1" value="C" />
  <input type="radio" id="radio1-D" name="1" value="D" />
</div>
<div>
  <input type="radio" id="radio2-A" name="2" value="A" />
  <input type="radio" id="radio2-B" name="2" value="B" />
  <input type="radio" id="radio2-C" name="2" value="C" />
  <input type="radio" id="radio2-D" name="2" value="D" />
</div>
<!-- 剩下38组同理，保证每个id唯一就行 -->

其实如果不需要用id做其他操作，甚至可以直接去掉id，因为单选按钮的分组是靠name属性控制的，和id无关。

然后修正JS的恢复逻辑 #

你原来的恢复代码完全搞错了方向：用$("#radio"+key)会选中所有同id的元素，而且用val()方法去设置checked属性是完全错误的——val()是用来设置输入框的值，而单选按钮的选中状态是靠checked这个DOM属性控制的，应该用prop()方法来操作。

正确的逻辑是：根据sessionStorage里保存的name（key）和value，精准定位到对应的单选按钮，然后设置它的选中状态。

修正后的JS代码：

$(document).ready(function(){
  // 保存选中状态的逻辑没问题，保留
  $('input[type="radio"]').on('change', function() {
    sessionStorage.setItem($(this).prop('name'), $(this).val());
  });

  // 重新写恢复选中状态的逻辑
  for (var i = 0; i < sessionStorage.length; i++) {
    var key = sessionStorage.key(i); // 拿到保存的name（比如"1"、"2"）
    var value = sessionStorage.getItem(key); // 拿到对应的选中值（比如"A"、"B"）
    // 精准定位到对应name和value的单选按钮，设置为选中
    $('input[name="' + key + '"][value="' + value + '"]').prop('checked', true);
  }
});

为什么这样能解决问题？ #

1. 用input[name="X"][value="Y"]的选择器，直接定位到某一组（name=X）里选中值为Y的那个单选按钮，不会选错。
2. 用prop('checked', true)来设置选中状态，这是操作DOM属性的正确方式，比attr()更可靠（因为checked是布尔类型的DOM属性，prop()能正确处理它的状态）。

这样修改后，刷新页面就能正确恢复每组单选按钮的选中状态，而且不会出现所有值都相同的问题了。

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