0

以下のコードを書いてみたのですが、チェックボックスをクリックした後にページを更新すると、チェックが外れてしまいます。どうすればチェックボックスが保存されるようになるのか教えていただきたいです!

<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>
2
  • 手元の環境ではチェックボックスの値が反映されます。違いは jQuery と jquery.cookies の読み込み部分です。<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> ブラウザのウェブコンソールでエラーが発生していないかどうかを確認してみてはどうでしょうか。
    – metropolis
    Commented 2023年3月5日 12:04
  • 「ページを更新する」というのは具体的にどうやっているのですか?
    – WebSurfer
    Commented 2023年3月5日 23:32

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。