頁面刷新后，復選框保持選中狀態

Question

我有幾個復選框，在頁面刷新后需要保持選中狀態。 但是它們或需要全部檢查以在刷新后保持選中狀態，或者如果僅選中了少數幾個，則刷新后就不會保持選中狀態。

關於如何解決它的任何想法？

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

Answer 1

將類保留在每個輸入上，但如果希望在存儲對象中使用某些唯一的內容，還可以給每個唯一的ID。

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

Answer 2

問題是班級名稱。 由於所有復選框都具有相同的類。 這行checkboxValues[this.className] = this.checked; 最后只輸入一個條目，即{'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">

Answer 3

您的jQuery是從Google網站加載的。 因此，已加載完成事件的js事件，您編碼的這些代碼應保留在window.load事件中，並且可以正常工作

window.load = function（）{

     //your performing code

}

頁面刷新后，復選框保持選中狀態

問題描述

3 個解決方案

解決方案1
1 已采納

解決方案2
0

解決方案3
-1 2016-02-19 23:48:59

頁面刷新后，復選框保持選中狀態

問題描述

3 個解決方案

解決方案1 1 已采納

解決方案2 0

解決方案3 -1 2016-02-19 23:48:59

解決方案1
1 已采納

解決方案2
0

解決方案3
-1 2016-02-19 23:48:59