ライブラリ「jquery.cookie.js」を使っています。

「保存」クリック時にチェック状態をcookieに保存したいのです。

次の書き方は何がダメなのか教えていただけませんでしょうか？

▼上のコード

html
1<div>
2  <label><input type="checkbox" name="chk_sample" value="apple">りんご</label>
3  <label><input type="checkbox" name="chk_sample" value="orange">みかん</label>
4</div>
5<div class="save">保存</div>
6
7
8<script>
9(function($){
10
11  $('body').on("click",'.save',function(){ 
12  
13    if($.cookie("chk_sample_selected_value")){
14
15      var load_values = $.cookie("chk_sample_selected_value").split(",");
16
17      for(var i = 0; i < load_values.length; ++i){
18        load_values[i] = decodeURIComponent(load_values[i]);
19      }
20
21      $("input[type=checkbox][name=chk_sample]").each(function(){
22        this.checked = $.inArray(this.value, load_values) != -1;
23      });
24    }
25
26})(jQuery);
27</script>

行動規範の内容に同意します

回答1件

ベストアンサー

if($.cookie("chk_sample_selected_value")){

クッキーchk_sample_selected_valueをチェックしていますが
かりに設定されていない場合のelseがないので、設定されてなければ
一生設定されないままなにも変化はないのでは？

それと無いとは思いますが、クッキーはセットしたけど空な場合は参照してもfalse扱いになります

javascript
1  $.cookie("a","1");
2  if($.cookie("a")) console.log("hoge");
3  $.cookie("b","");
4  if($.cookie("b")) console.log("fuga");
5  console.log(document.cookie);

sample

一応提示されているソースに準じて処理してみました

javascript
1$(function(){
2  if($.cookie("chk_sample_selected_value")){
3    $.cookie("chk_sample_selected_value").split(",").forEach(function(v){
4      $('input[name=chk_sample][value='+v+']').prop('checked',true);
5    });
6  }
7  $('.save').on("click",function(){ 
8    var v=$('input[name=chk_sample]:checked').map(function(){return $(this).val()}).get().join(",");
9    if(v===""){
10      $.removeCookie("chk_sample_selected_value");
11    }else{
12      $.cookie("chk_sample_selected_value",v);
13    }
14  });
15  $('.reload').on("click",function(){ 
16    location.href=location.href;
17  });
18});

HTML
1<div>
2  <label><input type="checkbox" name="chk_sample" value="apple">りんご</label>
3  <label><input type="checkbox" name="chk_sample" value="orange">みかん</label>
4</div>
5<div class="save">保存</div>
6<div class="reload">リロード</div>
7
8
9
10