Question

我有很多不同名称和价值的单选按钮

<div>    
<input type="radio" id="radio1" name="1" value="A" />
<input type="radio" id="radio1" name="1" value="B" />
<input type="radio" id="radio1" name="1" value="C" />
<input type="radio" id="radio1" name="1" value="D" />
</div>

<div>
<input type="radio" id="radio2" name="2" value="A" />
<input type="radio" id="radio2" name="2" value="B" />
<input type="radio" id="radio2" name="2" value="C" />
<input type="radio" id="radio2" name="2" value="D" />
</div>

等40个单选按钮。我使用sessionStorage保存了广播的名称和值，就像这样

$(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);
        var value = sessionStorage.getItem(key);

        $("#radio"+key).val(function(){
            $(this).attr("checked", value);
        });
    }

});

已检查状态已返回，但无线电的值始终与所有无线电按钮的值相同。

Answer 1

检查此https://jsfiddle.net/Lvmvky3u/1/，

将Id移至class，id仅引用唯一元素

$(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);
    var value = sessionStorage.getItem(key);

    $(".radio" + key).filter('[value='+value+']').prop('checked', true);
  }
});

Answer 2

我相信您的问题可能在于您有多个具有相同ID的元素。给每个单选按钮提供自己唯一的ID可以解决您的问题。

*编辑 - ＆gt; 这个问题源于这样一个事实，即元素经常被他们的“身份”识别出来。这会导致以下问题：您不会使用具有特定ID的元素应用更改/获取信息，而是使用该ID来编辑/获取最后一个元素的信息。

Answer 3

我检查了你的代码，它给了我预期的结果。

但你的for循环有问题。它为第一个单选按钮提供空值。因此，您可以使用value="" checked来提供默认值。

 <div>
    <input type="radio" id="radio1" name="1" value="A" value="" checked />
    <input type="radio" id="radio1" name="1" value="B" />
    <input type="radio" id="radio1" name="1" value="C" />
    <input type="radio" id="radio1" name="1" value="D" />
</div>

如何检索具有不同名称和值的多个单选按钮值

3 个答案: