Вызвать щелчок по переключателю с запоминанием выбора при обновлении страницы

Question

Вызвать щелчок по переключателю с запоминанием выбора при обновлении страницы

Этот вопрос не дублируется.

У меня есть две переключатели (радио1, радио2).

Мне удалось добиться следующего, НО отдельно:

Вызовите щелчок по "radio1" при загрузке страницы. Поэтому всякий раз, когда страница загружается, нажимается кнопка.
Запомните выбранный переключатель, который пользователь нажимает вручную, используя локальное хранилище, описанное в этом ответе Джозефа Зильбера. Поэтому, если пользователь вручную нажал на "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>

Опять же, они оба работают нормально, но по отдельности, любой из них будет работать.

Если кто-нибудь сможет помочь мне заставить оба метода работать вместе, я действительно ценю это.

3

php javascript html jquery radio-button

Author: Community, 2015-03-14

Source

1 answers

score 3 · Accepted Answer

Почему бы просто не установить свойство радио по умолчанию :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})
        );
    });
});

Jсфиддл

Или, если вам нужно запустить обработчик событий для радио по умолчанию (как вы делаете в своем коде, используя .trigger('click')) в DOM ready, используйте это:

$(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})
        );
    });
});

Jсфиддл

В качестве альтернативы, и даже лучше, установите свойство радио по умолчанию checked прямо в 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 />
...

Так что у вас это есть checked изначально, а не программно. Затем перезаписать его prop зависит от того, что находится в localStorage

РЕДАКТИРОВАТЬ (комментарий к ответу)

$(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');
    }

});

Jсфиддл