チェックボックスのON/Offをcookieに保存する方法

jQueryでブラウザのチェックボックスをcookieで操作する方法。
どうも、調べても これといった解説が見つからなかったので、書いてみる。

とりあえずこちらから、「jQuery Cookie」というプラグインをダウンロードして、WEBページに読み込ませましょう。
https://plugins.jquery.com/cookie/

まず、保存する方法から。

チェックされている値を配列に入れてカンマ区切りでクッキーに保存します。

var save_values = [];

$("input[type=checkbox][name=chk_sample]").each(function(){
    this.checked && save_values.push(encodeURIComponent(this.value));
});

$.cookie("chk_sample_selected_value", save_values.join(","));

次は読み出し。

これ逆で、クッキーから読んだ値をカンマ区切りで分割した配列の中に値があったらチェックを入れます。

var load_values = $.cookie("chk_sample_selected_value").split(",");

for(var i = 0; i < load_values.length; ++i){
    load_values[i] = decodeURIComponent(load_values[i]);
}

$("input[type=checkbox][name=chk_sample]").each(function(){
    this.checked = $.inArray(this.value, load_values) != -1;
});

サンプル

チェックを変えるとCOOKIEに保存されます。


<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <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 type="text/javascript">
        jQuery(function($){
            //ページを読み込んだら、チェックボックスにクッキーの値を反映する
            if($.cookie("chk_sample_selected_value")){
            
                var load_values = $.cookie("chk_sample_selected_value").split(",");
            
                for(var i = 0; i < load_values.length; ++i){
                    load_values[i] = decodeURIComponent(load_values[i]);
                }
                
                $("input[type=checkbox][name=chk_sample]").each(function(){
                    this.checked = $.inArray(this.value, load_values) != -1;
                });
            }

            //チェックを変えたらクッキーを保存するイベントを登録する
            $("input[type=checkbox][name=chk_sample]").change(function(){
            
                var save_values = [];
                
                $("input[type=checkbox][name=chk_sample]").each(function(){
                    this.checked && save_values.push(encodeURIComponent(this.value));
                });

                $.cookie("chk_sample_selected_value", save_values.join(","));
            });

            //▼現在のcookieの値を見る
            $("#btn_show_cookie").click(function(){
                $("#txt_cookie_value").val($.cookie("chk_sample_selected_value"));
            });
        });
        </script>
    </head>
    <body>
        <p>チェックを変えるとCOOKIEに保存されます。</p>
        <p>
            <label><input type="checkbox" name="chk_sample" value="apple">りんご</label>
            <label><input type="checkbox" name="chk_sample" value="orange">みかん</label>
        </p>
        <p>
            <input type="button" value="▼現在のcookieの値を見る" id="btn_show_cookie"><br>
            <input type="text" id="txt_cookie_value" size="50">
        </p>
    </body>
</html>