时间戳

首页 > 解决方案 > 如何将单选按钮和复选框保存到本地存储

javascript - 如何将单选按钮和复选框保存到本地存储

问题描述

我想将输入 type="radio" 和 "checkbox" 保存到 localStorage，并从 localStorage 中获取相同的值。对于文本和选择元素等其他输入字段，它正在工作，但对于单选和复选框，它没有保存。你能帮我写代码吗？

保存到本地存储

$('input[type="radio"]').each(function() {
    let id = $(this).attr('id');
    let value = $(this).val();
    localStorage.setItem(id, value);
  });

从本地存储加载

$('input[type="radio"]').each(function() {
    let id = $(this).attr('id');
    let value = localStorage.getItem(id);
    $(this).val(value);
    
  });



<input name="row8unit3grade" type="radio" value="5">A
<input name="row8unit3grade" type="radio" value="4">B
<input name="row8unit3grade" type="radio" value="3">C

<input name="row8unit2grade" type="radio" value="5">A
<input name="row8unit2grade" type="radio" value="4">B
<input name="row8unit2grade" type="radio" value="3">C

像这样，我们有 15 组具有不同名称的单选按钮。单击保存后，我们需要一次存储所有单选按钮顶部本地存储。并在点击恢复后获取所有值

标签： javascriptjquery

解决方案

row8unit3grade您可以按名称和循环浏览单选按钮row8unit2grade。并检查是否有人被检查，然后保存到本地存储。

<input type="radio" name="row8unit3grade" class="grade" value="5">A
<input type="radio" name="row8unit3grade" class="grade" value="4">B
<input type="radio" name="row8unit3grade" class="grade" value="3">C

<input type="radio" name="row8unit2grade" class="grade2" value="5">A
<input type="radio" name="row8unit2grade" class="grade2" value="4">B
<input type="radio" name="row8unit2grade" class="grade2" value="3">C

<button id="save">Save</button>
<button id="restore">Restore</button>

$(document).on('click','#save',function(){
    $('input[name="row8unit3grade"]:checked').each(function() {
        let id = $(this).attr('name');
        let value = $(this).val();
        localStorage.setItem(id, value);
        return false;
    });
    $('input[name="row8unit2grade"]:checked').each(function() {    
        let id = $(this).attr('name');
        let value = $(this).val();
        localStorage.setItem(id, value);
    });
});

$(document).on('click','#restore',function(){
    $('input[name="row8unit3grade"]:checked').each(function() {
        let id = $(this).attr('name');
        var value = localStorage.getItem(id);
        alert(value);
    });
    $('input[name="row8unit2grade"]:checked').each(function() {
        let id = $(this).attr('name');
        var value = localStorage.getItem(id);
        alert(value);
    });
});

这是jsfiddle

推荐阅读