Question

这个问题没有重复。

我有两个单选按钮（radio1，radio2）。

我能够实现以下目标，但另外：

点击＆＃34; radio1＆＃34;在页面加载。因此，无论何时加载页面，都会单击该按钮。
使用Joseph Silber在this answer中描述的本地存储，记住用户手动点击的所选单选按钮。因此，如果用户手动点击＆＃34; radio2＆＃34;然后刷新页面，它会记住那个选择。

问题是我不能同时使用这两种方法。由于触发的点击始终会占用本地存储空间，因此在刷新页面时不会记住所选的单选按钮。

我需要＆＃34; radio1＆＃34;默认情况下，在页面加载时单击（未选中），但是当用户手动单击＆＃34; radio2＆＃34;它会记住这个选择，每当页面被刷新时，＆＃34; radio2＆＃34;将根据用户的选择点击。

我尝试了很多代码组合，让它们一起工作，但我无法弄明白。

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

<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>

同样，它们都可以正常工作但是分开，其中一个都能正常工作。

如果有人可以帮助我让这两种方法协同工作，我将非常感激。

Answer 1

为什么不设置默认的广播: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就绪时触发默认无线电的事件处理程序（就像在代码中使用.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

触发单击单选按钮，并在页面刷新时记住选择

1 个答案: