触发单选按钮单击,并在页面刷新时记住选择
Trigger click on radio button with remembering selection on page refresh
这个问题不重复。
我有两个单选按钮(单选按钮 1、收音机2)。
我能够实现以下目标,但分别实现:
- 在页面加载时触发对"radio1"的点击。因此,每当加载页面时,都会单击该按钮。
- 请记住用户手动单击的所选单选按钮,使用Joseph Silber在此答案中描述的本地存储。因此,如果用户手动单击"radio2",然后刷新页面,它会记住该选择。
问题是我不能同时使用这两种方法。因为触发的单击始终会接管本地存储,这使得刷新页面时不会记住所选单选按钮。
默认情况下,我需要在页面加载时单击(未选中)"radio1",但是当用户手动单击"radio2"时,它会记住该选择,并且每当刷新页面时,"radio2"将相对于用户的选择被单击。
我尝试了很多代码组合,我必须让它们一起工作,但我无法弄清楚。
用于在页面加载时触发单击单选按钮的代码:
<script type="text/javascript">
$(document).ready(function() {
$("#radio1 input:radio").click(function() {
alert("clicked");
});
$("input:radio:first").prop("checked", true).trigger("click");
});
</script>
本地存储的代码;记住无线电选择:
<script type="text/javascript">
$(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})
);
});
});
</script>
同样,它们都可以正常工作,但分开,它们中的任何一个都可以工作。
如果有人能帮助我使这两种方法一起工作,我将不胜感激。
为什么不只设置默认的无线电: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})
);
});
});
JSFiddle
或者,如果您需要在 DOM ready 上触发默认无线电的事件处理程序(就像您在代码中使用 .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})
);
});
});
JSFiddle
或者,更好的是,在 HTML 中设置默认的无线电checked
属性权限:
<input type=radio id=radio1 value=radio1 name=radio checked />
<input type=radio id=radio2 value=radio2 name=radio />
<input type=radio id=radio3 value=radio3 name=radio />
...
这样您就可以以本机方式而不是以编程方式checked
拥有它。然后覆盖其prop
取决于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');
}
});
JSFiddle
相关文章:
- 如何取消选择所选选项并将JqueryMobile中选择的值刷新为1st
- Jquery选择菜单选项在页面刷新时失败
- 触发单选按钮单击,并在页面刷新时记住选择
- 如何在不刷新页面和不单击“发送”按钮的情况下从下拉选择中向 MYSQL 发送值
- 如何刷新存储和快照的 jquery 选择器变量
- 角度:ui选择.具有“刷新”功能的自定义标记
- 保存当前选择的<李>在页面刷新后的Angular中
- 如何在页面刷新后在grails中保留下拉选择
- 在页面刷新时恢复下拉选择的选项
- 余烬.当用户刷新网站时,保留下拉菜单中的选择
- 刷新选择选项
- jQuery更改了选择后刷新选择的选项
- 使用 jquery 刷新选择
- 单击(IE8问题)刷新选择框
- 自动刷新选择菜单's在Web应用程序中
- 谷歌chrome没有't在使用javascript取消选择时刷新选择选项
- 刷新选择了相同选项卡href的页面
- JQuery Mobile:禁用和重新启用和刷新选择菜单选项
- 无法刷新选择器
- JavaScript方法不会按预期的方式根据星期几刷新选择选项