尝试以多种方式解决这个问题。 1.只需将普通的html"选中"默认选项添加到我的表单中的单选按钮中,然后 2.让JS函数做到这一点,这是尝试的想法的要点。
问题:我发现无论我怎么做,如果默认情况下将无线电指定为选中(在用户做出选择之前),则在此之后完成的任何操作都不会正确保存(如果有的话)localStorage。 localStorage 将保存初始的默认选择,但是,从那时起什么都不能更改(即使在"物理"选择另一个选项之后)。
我知道 localStorage 正在工作,因为如果我省略默认名称(以及其余输入),它就可以完美运行。
表单代码:
<label>Who is the contact person for this event?<span class="requiredtext">*</span></label>
<input type="radio" name="Contact_Person" id="Contact_Person1" value="Submitter is the contact person" onclick="contacthide()" checked required> I am<br />
<input type="radio" name="Contact_Person" id="Contact_Person2" value="Submitter is not the contact person" onclick="contactshow()" required>
本地存储保存代码:
function localStoragefunctions() {
localStorage.clear();
if (Modernizr.localstorage) {
//Set variable to show that data is saved
localStorage.setItem("flag", "set");
//Save radio and checkbox data
$(window).bind('unload', function() {
$('input[type=radio]').each(function() {
localStorage.setItem('radio_' + $(this).attr('id'), JSON.stringify({
checked: this.checked
}));
});
});
如果用户在最终提交之前返回进行更改,则将其吐出的代码:
$(document).ready(function() {
if (Modernizr.localstorage) {
//Browser supports it
if (localStorage.getItem("flag") == "set") {
$('input[type=radio]').each(function() {
var state = JSON.parse(localStorage.getItem('radio_' + $(this).attr('id')));
if (state) this.checked = state.checked;
});
除此之外,我还有一个确认页面,该页面抓取存储在localStorage中的所有变量,并在用户点击提交之前将它们呈现给用户进行最终检查。
这包括:var ContactPerson = localStorage.getItem('Contact_Person');
然后是一个吐出 html 和变量值的document.write
。同样,如果我不尝试设置默认的无线电选择,这工作正常(并且适用于所有其他输入类型)。
理想的结果是默认选择最有可能的单选按钮选项,以便可以节省用户时间。 如果我能事先"为他们做出决定",我不想向他们出示一个表格,他们必须亲自点击每个单选按钮。
希望这一切都有意义!
这是一个老问题,但我一直在解决类似的问题,并想分享我的解决方案。
当您设置本地存储项目时,您将保存无线电输入及其值,b/c 您使用 ID 属性作为键。
localStorage.setItem('radio_' + $(this).attr('id'), JSON.stringify({ checked: this.checked }));
这可能没问题,但我采取了不同的方法。而且,我可能错过了一些东西,所以欢迎评论。
相反,我使用 $(this).attr('name')
来设置密钥。因此,当选中任一单选按钮时,会将值保存到相同的 localStorage 键。
在我的方案中,我将许多输入存储到 localStorage,因此我的解决方案有点抽象。我在每个输入上使用jQuery的.change()方法调用saveToLocalStorage()。此外,我将输入的值直接保存到本地存储中。
function saveToLocalStorage(input) {
if ( $(input).attr('type')=='radio' ) {
localStorage[$(input).attr('name')] = $(input).val();
} else {
localStorage[$(input).attr('id')] = $(input).val();
}
}
从 localStorage 检索时,我必须在选择之前检查 localStorage 键:值对是否与无线电输入匹配。否则,我选择了两个无线电输入。请注意,在我的场景中,我正在使用jQuery 1.4.4,因此attr('checked','checked')。
$('input[type=radio]').each(function() {
var key = $(this).attr('name');
var val = localStorage[key];
if ( $(this).attr('name') == key && $(this).attr('value') == val ) {
$(this).attr('checked', 'checked');
}
});