php单选按钮选中事件,javascript-触发单选按钮单击并记住页面刷新选择

这个问题没有重复.

我有两个单选按钮(radio1,radio2).

我能够分别实现以下目标：

>触发页面加载上的“ radio1”点击.因此,无论何时加载页面,都将单击该按钮.

>请记住,用户使用约瑟夫·西尔伯(Joseph Silber)在this answer中描述的本地存储手动选择了选定的单选按钮.因此,如果用户手动单击“ radio2”,然后刷新页面,则它会记住该选择.

问题是我不能同时使用两种方法.由于触发的单击始终会接管本地存储,因此刷新页面时不会记住所选的单选按钮.

默认情况下,我需要在页面加载时单击“ radio1”(未选中),但是当用户手动单击“ radio2”时,它会记住该选择,并且每当刷新页面时,都会相对于用户的选择.

我花了很多力气将代码组合在一起,才能使它们一起工作,但我无法弄清楚.

触发页面加载时单击单选按钮的代码：

$(document).ready(function() {

$("#radio1 input:radio").click(function() {

alert("clicked");

});

$("input:radio:first").prop("checked", true).trigger("click");

});

用于本地存储的代码；记住收音机选择：

$(function()

{

$('input[type=radio]').each(function()

{

var state = JSON.parse( localStorage.getItem('radio_' + this.id) );

if (state) this.checked = state.checked;

});

});

$(window).bind('unload', function()

{

$('input[type=radio]').each(function()

{

localStorage.setItem(

'radio_' + this.id, JSON.stringify({checked: this.checked})

);

});

});

同样,它们都可以正常工作,但单独运行,其中任何一个都可以工作.

如果有人可以帮助我使这两种方法一起工作,我将不胜感激.

解决方法:

为什么不只设置默认的radio：checked属性,而是设置.trigger(‘click’)呢？

$(function(){

//state default radio ':checked' property there:

$("input:radio:first").prop("checked", true);

$("#radio1 input:radio").click(function() {

alert("clicked");

});

// overwrite radio ':checked' property there (if exists in localStorage) :

$('input[type=radio]').each(function(){

var state = JSON.parse( localStorage.getItem('radio_' + this.id) );

if (state) this.checked = state.checked;

});

});

$(window).bind('unload', function(){

$('input[type=radio]').each(function(){

localStorage.setItem(

'radio_' + this.id, JSON.stringify({checked: this.checked})

);

});

});

或者,如果您需要在DOM准备就绪时触发默认广播的事件处理程序(就像在代码中使用.trigger(‘click’)所做的那样),请使用以下代码：

$(function(){

//state default radio ':checked' property there and run its `click` event handler:

radioClick.call($("input:radio:first").prop("checked", true));

$("#radio1 input:radio").click(radioClick);

// method triggered on radio click, will skip the localStorage modification:

function radioClick() {

// you can refer here to 'this' as to clicked radio

alert($(this).val());

}

// overwrite radio ':checked' property there (if exists in localStorage) :

$('input[type=radio]').each(function(){

var state = JSON.parse( localStorage.getItem('radio_' + this.id) );

if (state) this.checked = state.checked;

});

});

$(window).bind('unload', function(){

$('input[type=radio]').each(function(){

localStorage.setItem(

'radio_' + this.id, JSON.stringify({checked: this.checked})

);

});

});

另外,甚至更好的是,在HTML中直接设置默认的单选属性：

...

这样您就可以对它进行本地检查,而不是通过编程检查.然后覆盖其属性取决于localStorage中的内容

编辑(答案的OP评论)

$(function () {

$('input[type="radio"]').click(function () {

localStorage.setItem('radioIdSelected', $(this).attr('id'));

// your method to run on selected radio button (alert for demo):

alert($(this).attr('id'));

});

var storageRadio = localStorage.getItem('radioIdSelected');

if (storageRadio !== null && storageRadio !== undefined && $('#' + storageRadio).length) {

$('#' + storageRadio).trigger('click');

} else {

$('input[type="radio"]:first').trigger('click');

}

});

标签：html,javascript,php,jquery,radio-button

来源： https://codeday.me/bug/20191120/2045259.html