Question

我有以下代码用于记住页面刷新时的表单输入。我不完全确定如何记住单选按钮的输入。如何调整代码来做到这一点？

<input type="radio" name="options[Substrate]" id="clear" class="substrate" value="Clear – 125 µm SU320" />
<input type="radio" name="options[Substrate]" id="white-50" class="substrate" value="White – 50 µm Melinex 339"/>


$(document).ready(function() {

// Save Order on Refresh
    $(window).unload(saveSettings);
    loadSettings();

});


function loadSettings() {
    $('#circuitsNum').val(localStorage.setcircuit);
    $('#distanceNum').val(localStorage.setdistance);
    $('#note').val(localStorage.setnote);
    $("#metreSelect").val(localStorage.setmetre);
}

function saveSettings() {
    localStorage.setcircuit = $('#circuitsNum').val();
    localStorage.setdistance = $('#distanceNum').val();
    localStorage.setnote = $('#note').val();
    localStorage.setmetre = $("#metreSelect").val();
}

Answer 1

您可以使用$('radioButton').prop("checked")功能检查是否选择了单选按钮。

和$('radioButton').prop("checked", true)检查单选按钮。

或者，您可以获取已选中选项的ID：

$('input[name="options[Substrate]"]:checked').attr('id')

使用localStorage设置值：

localStorage.setItem('item_key', 'item_value');

要从localStorage获取值，请使用：

localStorage.getItem('item_key');

所以要将它与你的代码一起使用：

function saveSettings() {

    // Setting the ID of the checked button
    localStorage.setItem('substrateRadioButton', $('input[name="options[Substrate]"]:checked').attr('id'));

    // or

    // Setting the state of each button
    localStorage.setItem('clear', $("#clear").prop("checked")); 
    localStorage.setItem('white-50', $("#white-50").prop("checked")); 
}

function loadSettings () {
    // Gettings the ID of the checked button
    $("#"+localStorage.getItem('substrateRadioButton')).prop("checked", true);

    // or        

    // Gettings the state of each button
    $("#clear").prop("checked", localStorage.getItem('clear'));
    $("#white-50").prop("checked", localStorage.getItem('white-50'));
}

您可以使用if语句检查值是否设置为：

var item = localStorage.getItem('item_key');

if (item) {
    // key is set
} else {
    // key is not set
}

检查loadSettings()函数中是否存在值是明智的。

详细了解localStorage here。

以及有关prop() here的更多内容。

localStorage for Radio Input？

1 个答案: