Флажки остаются под контролем после обновления страницы

У меня есть несколько флажков, которые необходимо проверить после обновления страницы. Но они или должны быть все проверены, чтобы оставаться включенными после обновления, либо если проверено только несколько, они не остаются проверенными после обновления.Флажки остаются под контролем после обновления страницы

Любые идеи о том, как исправить это?

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Persist checkboxes 1</title> 
    </head> 

    <body> 

     <input type="checkbox" class="option"> 

     <input type="checkbox" class="option"> 

     <input type="checkbox" class="option"> 

     <input type="checkbox" class="option"> 

     <input type="checkbox" class="option"> 

     <input type="checkbox" class="option"> 


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script> 

    <script> 
     $(".option").on("change", function(){ 
     var checkboxValues = {}; 
     $(".option").each(function(){ 
      checkboxValues[this.className] = this.checked; 
     }); 
     $.cookie('checkboxValues', checkboxValues, { expires: 1, path: '/' }) 
     }); 

     function repopulateCheckboxes(){ 
     var checkboxValues = $.cookie('checkboxValues'); 
     if(checkboxValues){ 
      Object.keys(checkboxValues).forEach(function(element) { 
      var checked = checkboxValues[element]; 
      $("." + element).prop('checked', checked); 
      }); 
     } 
     } 

     $.cookie.json = true; 
     repopulateCheckboxes(); 
    </script> 
    </body> 
</html>

источник

2016-02-19 Dennis Novac

Не может иметь повторяющиеся идентификаторы, они должны быть уникальными для каждой страницы. – zer00ne

@ zer00ne Я знаю, но когда я использую классы, [this.className] не работает, вот в чем проблема. –

Ваши элементы не имеют атрибута класса. –

Keep класс на каждом входе, но также дать каждому уникальный идентификатор, если вы хотите иметь что-то уникальное для использования в объекте хранения.

<input type="checkbox" id="opt1" class="option"> 

    <input type="checkbox" id="opt2" class="option"> 

    <input type="checkbox" id="opt3" class="option"> 

    <input type="checkbox" id="opt4" class="option"> 

    <input type="checkbox" id="opt5" class="option"> 

    <input type="checkbox" id="opt6" class="option">

Вы можете еще выбрать сразу элементы их классом, но использовать .id для хранения элементов в объекте, и сбросить их.

$(".option").on("change", function(){ 
    var checkboxValues = {}; 

    $(".option").each(function(){ 
     checkboxValues[this.id] = this.checked; 
    }); 

    $.cookie('checkboxValues', checkboxValues, { expires: 1, path: '/' }) 
    }); 

    function repopulateCheckboxes(){ 
    var checkboxValues = $.cookie('checkboxValues'); 

    if(checkboxValues){ 
     Object.keys(checkboxValues).forEach(function(id) { 
     $("#" + id).prop('checked', checkboxValues[id]); 
     }); 
    } 
    } 

    $.cookie.json = true; 
    repopulateCheckboxes();

источник

2016-02-20 00:17:17

-1

Ваш jquery загружен с веб-сайта google. так что JS событие загруженного завершающего события, вы закодированы это код должен оставаться в случае window.load и он работает

window.load = функция() {

 //your performing code

}

источник

2016-02-19 23:48:59 user5949499

это не работает –

Проблема - это название класса. Поскольку все флажки имеют одинаковый класс. Эта строка checkboxValues[this.className] = this.checked; заканчивается только одной записью i.e {'option' : true}, если последний проверен еще {'option' : false}.

В нижеприведенном фрагменте кода я использую индекс массива и элемента для сохранения состояния.

$.cookie.json = true; 
 

 
$(function() { 
 
    var options = $.cookie('options'); 
 
    var chkbxs = $('.option'); 
 
    console.log('options', options); 
 
    if (options) { 
 
    $.each(options, function(i, chkd) { 
 
     chkbxs.eq(i).prop('checked', chkd); 
 
    }); 
 
    } 
 

 
    chkbxs.on('change', function() { 
 
    options = chkbxs.map(function(_, chk) { 
 
     return chk.checked; 
 
    }).get(); 
 
    console.log('options', options); 
 
    $.cookie('options', options); 
 
    }); 
 
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script> 
 

 

 
<input type="checkbox" class="option"> 
 
<input type="checkbox" class="option"> 
 
<input type="checkbox" class="option"> 
 
<input type="checkbox" class="option"> 
 
<input type="checkbox" class="option"> 
 
<input type="checkbox" class="option">

источник

2016-02-20 00:37:27 Arvind

Флажки остаются под контролем после обновления страницы

ответ

Смежные вопросы