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

Question

This question is not duplicated.

I have two radio buttons (radio1, radio2).

I was able to achieve the following, BUT separately:

1. Trigger a click on "radio1" on page load. So whenever the page is loaded, the button is clicked.
2. Remember the selected radio button that is manually clicked by user, using local storage described in this answer by Joseph Silber. So if the user manually clicked on "radio2" and then refreshed the page, it remembers that selection.

The problem is that I cannot use both methods at the same time. Because the triggered click always takes over the local storage, which makes the selected radio button not remembered when page is refreshed.

I need "radio1" to be clicked (not checked) on page load by default, but when the user manually clicks on "radio2" it remembers that selection, and whenever the page is refreshed the "radio2" will be clicked with respect to the user's selection.

I tried a lot to make a combination of codes I have to get them both works together, but I couldn't figure it out.

The code for trigger a click on radio button on page load:

<script type="text/javascript">
$(document).ready(function() {
  $("#radio1 input:radio").click(function() {
    alert("clicked");
   });
  $("input:radio:first").prop("checked", true).trigger("click");
});
</script>

The code for local storage; remembering radio selection:

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

Again, they both works fine but separately, either one of them will work.

If anyone can help me to make both methods work together, I will really appreciate it.

Answer 1

Why not just set the default radio :checked property but .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

---

Or, if you need to trigger an event handler for default radio (as you do in your code using .trigger('click')) on DOM ready, use this:

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

---

Alternatively, and even better, set the default radio checked property right in the HTML:

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

So that you have it checked natively, not programatically. Then overwrite its prop depends on what is in the localStorage

---

EDIT (OP comment to the answer)

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