複選框在頁面刷新後保持檢查狀態

我有一些複選框需要在刷新頁面後保持檢查狀態。但是它們或需要全部檢查以在刷新後保持檢查狀態，或者只檢查了幾個，它們不會在刷新後保持檢查狀態。複選框在頁面刷新後保持檢查狀態

關於如何修復它的任何想法？

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

不能有重複的ID，它們必須是唯一的每一頁。 – zer00ne

@ zer00ne我知道，但是當我使用類時，[this.className]不起作用，那就是問題所在。 –

您的元素沒有類屬性。 – 2016-02-19 23:24:15

保持每個輸入上的類，而且如果您希望在存儲對象中使用唯一的東西，則還會爲每個輸入提供唯一的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();

來源

2016-02-20 00:17:17

-1

您的jquery從谷歌網站下載。所以加載完成事件的JS事件，您編碼這些代碼應該留在window.load事件和它的工作

window.load =函數（）{

 //your performing code

}

來源

2016-02-19 23:48:59 user5949499

這不起作用 –

問題是類名。由於所有複選框都具有相同的類別。這條線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">

來源

2016-02-20 00:37:27 Arvind

複選框在頁面刷新後保持檢查狀態

回答

相關問題