（jQuery）在cookie中單擊時保存複選框狀態

Question

關於此功能有很多主題，但我似乎無法得到它的工作。我在這個特定的案例上搜索了一些鏈接，並且有一些鏈接讓我在這裏，但是我似乎無法讓他們工作。我做的唯一的工作是以下幾點： http://dl.dropbox.com/u/2238080/a/!old/z.htm 但正如你所看到的，它沒有存儲框的狀態是未選中的。

問候， 魯

Answer 1

您可以將所有代碼更改爲：EDITED刪除不需要的部分。

$(document).ready(function(){ 
    // read the current/previous setting 
    $("input.box[type=checkbox]").each(function() { 
     var name = $(this).attr('name'); 
     if ($.cookie(name) && $.cookie(name) == "true") { 
      $(this).prop('checked', $.cookie(name)); 
     } 
    }); 
    // event management 
    $("input.box[type=checkbox]").change(function() { 
     var name = $(this).attr("name"); 
     $.cookie(name, $(this).prop('checked'), { 
      path: '/', 
      expires: 365 
     }); 
    }); 
}); 

包括擺脫這一切：

$(document).ready(function(){ 
    remember("[name=1]"); 
}); 
... 

編輯：更簡潔的版本：

$("input.box").each(function() { 
    var mycookie = $.cookie($(this).attr('name')); 
    if (mycookie && mycookie == "true") { 
     $(this).prop('checked', mycookie); 
    } 
}); 
$("input.box").change(function() { 
    $.cookie($(this).attr("name"), $(this).prop('checked'), { 
     path: '/', 
     expires: 365 
    }); 
}); 

工作示例：http://jsfiddle.net/R73vy/

Answer 2

應該用jQuery < 1.6工作，但首先是1.6，你應該的.attr("checked")每一次出場改變.prop("checked")

編輯：改變了，如果條件檢查的cookie

 function remember(selector){ 
      $(selector).each(
       function(){ 
        var name = $(this).attr('name'); 
        if($.cookie(name) && $.cookie(name)=="true"){ 
         $(this).prop('checked', true); 
        } else { 
         $(this).prop('checked', false) 
        } 
        $(this).change(
         function(){ 
          $.cookie(name, $(this).prop('checked'), { path: '/', expires: 365 }); 
         } 
        ); 
       } 
      ); 
     } 

Answer 3

如果不嚴格需要使用cookie，使用更新的HTML5網絡存儲（特別是該ca中的sessionStorage對象SE）是很多比在cookie中存儲更輕鬆，更好：

http://www.w3schools.com/html/html5_webstorage.asp

瀏覽器支持得滿滿的：

http://caniuse.com/#search=sessionstorage

Answer 4

如果你在一個複選框只是有興趣AND/OR你不想爲此包括jQuery cookie插件，這裏有兩行代碼：

//on page load set the checkbox to stored value or default to true 
$('#turbo').prop('checked' , (typeof sessionStorage.turbo !== 'undefined') ? (sessionStorage.turbo=='true') : true); 
//when checkbox is updated, update stored value 
$('#turbo').change(function() { sessionStorage.turbo = $(this).prop('checked'); }); 

這也不使用c ookies可以節省幾個字節的帶寬。更改爲localStorage以延長保存的選擇的壽命。