以下のコードを書いてみたのですが、チェックボックスをクリックした後にページを更新すると、チェックが外れてしまいます。どうすればチェックボックスが保存されるようになるのか教えていただきたいです!
<html>
<head>
<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/wp-includes/js/jquery/jquery.cookie.js"></script>
<script>
//チェックボックスクッキー設定
jQuery(function($){
//ページを読み込んだら、チェックボックスにクッキーの値を反映する
if($.cookie("choices_selected_value")){
var load_values = $.cookie("choices_selected_value").split(",");
for(var i = 0; i < load_values.length; ++i){
load_values[i] = decodeURIComponent(load_values[i]);
}
$("input[type=checkbox][name=choices]").each(function(){
this.checked = $.inArray(this.value, load_values) != -1;
});
}
//チェックを変えたらクッキーを保存するイベントを登録する
$("input[type=checkbox][name=choices]").change(function(){
var save_values = [];
$("input[type=checkbox][name=choices]").each(function(){
this.checked && save_values.push(encodeURIComponent(this.value));
});
$.cookie("choices_selected_value", save_values.join(","));
});
});
</script>
</head>
<body>
<h2>チェックボックス</h2>
<label>
<input type="checkbox" name="choices" value="choice1" /> Choice 1
</label>
<label>
<input type="checkbox" name="choices" value="choice2" /> Choice 2
</label>
<label>
<input type="checkbox" name="choices" value="choice3" /> Choice 3
</label>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
,<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
ブラウザのウェブコンソールでエラーが発生していないかどうかを確認してみてはどうでしょうか。