質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.87%

チェックした順番をcookieに保存したい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,067
退会済みユーザー

退会済みユーザー

【目的】

チェックした順番もcookieに保存したいのですけれど、そのような方法をご教示頂けませんでしょうか?

なぜ順番が必要かと言いますと…

【現状】

チェックした項目が左列の位置に追加されるテーブルがあり、cookie保存もできます。

しかし、現状で保存されるのは「チェックの有無」だけ。

なので、せっかく左列に追加したハズの「列の位置」は次回訪問時に復元できません。

つまり、次回訪問時には、追加項目が「HTML構造の位置」に行ってしまうのです。

イメージ説明
そんなわけで、チェックした順番も保存できれば「列の位置」も復元されるのかな?と思い、上述の目的に至った次第です。

以下、現状のサンプルです。

【サンプル】

▼動くサンプル
http://ochan.info/

▼上のコード

<!-- チェック項目 -->
<div>
    <div class="check-wrap">
    <label for="1">
      <input id="1" class="check" type="checkbox" name="chk_day" value="1">1
    </label>
    <label for="2">
      <input id="2" class="check" type="checkbox" name="chk_day" value="2">2
    </label>
    <label for="3">
      <input id="3" class="check" type="checkbox" name="chk_day" value="3">3
    </label>
    <label for="4">
      <input id="4" class="check" type="checkbox" name="chk_day" value="4">4
    </label>
    <label for="5">
      <input id="5" class="check" type="checkbox" name="chk_day" value="5">5
    </label>
    </div>
    <div class="save">保存</div>    
</div>

<!-- テーブル -->
<table>
    <thead>
        <tr>
            <th class="name-title"></th>
            <th class="1 left">1</th>
            <th class="2">2</th>                
            <th class="3">3</th>
            <th class="4">4</th>
            <th class="5">5</th>            
        </tr>
    </thead>
    <tbody>        
        <tr>
            <td class="name"></td>
            <td class="1 left">あ1</td>
            <td class="2">あ2</td>
            <td class="3">あ3</td>
            <td class="4">あ4</td>
            <td class="5">あ5</td>            
        </tr>
        <tr>
            <td class="name"></td>
            <td class="1 left">い1</td>
            <td class="2">い2</td>
            <td class="3">い3</td>
            <td class="4">い4</td>
            <td class="5">い5</td>            
        </tr>
        <tr>
            <td class="name"></td>
            <td class="1 left">う1</td>
            <td class="2">う2</td>
            <td class="3">う3</td>
            <td class="4">う4</td>
            <td class="5">う5</td>            
        </tr>
        <tr>
            <td class="name"></td>
            <td class="1 left">え1</td>
            <td class="2">え2</td>
            <td class="3">え3</td>
            <td class="4">え4</td>
            <td class="5">え5</td>            
        </tr>
        <tr>
            <td class="name"></td>
            <td class="1 left">お1</td>
            <td class="2">お2</td>
            <td class="3">お3</td>
            <td class="4">お4</td>
            <td class="5">お5</td>            
        </tr>            
    </tbody>
</table>
//////////////////////////////////
////Cookie保存機能

//ライブラリ「jquery.cookie.js」の中身
(function($){ 
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD (Register as an anonymous module)
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {

    var pluses = /\+/g;

    function encode(s) {
        return config.raw ? s : encodeURIComponent(s);
    }

    function decode(s) {
        return config.raw ? s : decodeURIComponent(s);
    }

    function stringifyCookieValue(value) {
        return encode(config.json ? JSON.stringify(value) : String(value));
    }

    function parseCookieValue(s) {
        if (s.indexOf('"') === 0) {
            // This is a quoted cookie as according to RFC2068, unescape...
            s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
        }

        try {
            // Replace server-side written pluses with spaces.
            // If we can't decode the cookie, ignore it, it's unusable.
            // If we can't parse the cookie, ignore it, it's unusable.
            s = decodeURIComponent(s.replace(pluses, ' '));
            return config.json ? JSON.parse(s) : s;
        } catch(e) {}
    }

    function read(s, converter) {
        var value = config.raw ? s : parseCookieValue(s);
        return $.isFunction(converter) ? converter(value) : value;
    }

    var config = $.cookie = function (key, value, options) {

        // Write

        if (arguments.length > 1 && !$.isFunction(value)) {
            options = $.extend({}, config.defaults, options);

            if (typeof options.expires === 'number') {
                var days = options.expires, t = options.expires = new Date();
                t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
            }

            return (document.cookie = [
                encode(key), '=', stringifyCookieValue(value),
                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                options.path    ? '; path=' + options.path : '',
                options.domain  ? '; domain=' + options.domain : '',
                options.secure  ? '; secure' : ''
            ].join(''));
        }

        // Read

        var result = key ? undefined : {},
            // To prevent the for loop in the first place assign an empty array
            // in case there are no cookies at all. Also prevents odd result when
            // calling $.cookie().
            cookies = document.cookie ? document.cookie.split('; ') : [],
            i = 0,
            l = cookies.length;

        for (; i < l; i++) {
            var parts = cookies[i].split('='),
                name = decode(parts.shift()),
                cookie = parts.join('=');

            if (key === name) {
                // If second argument (value) is a function it's a converter...
                result = read(cookie, value);
                break;
            }

            // Prevent storing a cookie that we couldn't decode.
            if (!key && (cookie = read(cookie)) !== undefined) {
                result[name] = cookie;
            }
        }

        return result;
    };

    config.defaults = {};

    $.removeCookie = function (key, options) {
        // Must not alter options, thus extending a fresh object...
        $.cookie(key, '', $.extend({}, options, { expires: -1 }));
        return !$.cookie(key);
    };

}));
})(jQuery);


//ライブラリ「jquery.cookie.js」の利用
(function($){
$(function(){
  if($.cookie("chk_day_selected_value")){
    $.cookie("chk_day_selected_value").split(",").forEach(function(v){
      $('input[name=chk_day][value='+v+']').prop('checked',true);
    });
  }
  $('.save').on("click",function(){ 
    var v=$('input[name=chk_day]:checked').map(function(){return $(this).val()}).get().join(",");
    if(v===""){
      $.removeCookie("chk_day_selected_value");
    }else{
      $.cookie("chk_day_selected_value",v);
    }

    //保存クリック歴の有無を判別するためのクラス追加
    $.cookie("access",$('body').addClass('access'));

  });
});
})(jQuery);



//////////////////////////////////
////チェックボックスによる表示切替機能

//保存クリック歴がない場合は123にチェックを入れておく
(function($){
    if($.cookie("access") == undefined) {
    $("#1, #3, #3").prop("checked", true);
    }
})(jQuery);


//cookie読み込み時の表示
(function($){
$(document).ready(function () {

    if ($("#1").prop("checked") == true) {
        $(".1").css('display', 'table-cell');        
    } else {
        $(".1").css('display', 'none');
    }

    if ($("#2").prop("checked") == true) {
        $(".2").css('display', 'table-cell');        
    } else {
        $(".2").css('display', 'none');
    }    

    if ($("#3").prop("checked") == true) {
        $(".3").css('display', 'table-cell');        
    } else {
        $(".3").css('display', 'none');
    }

    if ($("#4").prop("checked") == true) {
        $(".4").css('display', 'table-cell');        
    } else {
        $(".4").css('display', 'none');
    }

    if ($("#5").prop("checked") == true) {
        $(".5").css('display', 'table-cell');        
    } else {
        $(".5").css('display', 'none');
    }        

})
})(jQuery);

//選択時に項目追加
(function($){

    $('input[name="chk_day"]').change(function(event) {
        event.preventDefault();
        var id = $(this).attr('id');
        $('.' + id)
            .toggle()
            .each(function(){
            if ($(this).css('display') == 'table-cell')
                    $(this)
                    .parent()
                .find('.left')
                .before(this)
                .removeClass('left')
                            .end()
                .end()
                .addClass('left');
            });        
    });

})(jQuery);


長くなってすみません。ヒントだけでも嬉しいです。
どうぞよろしくお願い致します。
ちなみにチェックボックスは300個ほどあります。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2018/03/31 20:33

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

+3

チェックした順番もcookieに保存したい

おおまかには、こんな感じでしょうか。

  1. チェックのたびに保存用データを作る(ただしcookieへの保存はしない)
  2. 「保存」ボタンが押されたら、1.で作っておいたデータをcookieに保存する

保存用データは、最初は空の配列にしておきます。
そして、チェックボックスがチェックされたときに、チェックonになったなら配列の末尾にチェックされた番号を追加/チェックoffなら保存用データからチェックされた番号を取り除く。

次回ロード時にチェック状態を復元する場合は、保存用データ作成と逆のことをすればそれらしくなると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/31 11:10

    こんにちは。なるほど。どうもありがとうございます。おおまかとは仰いますが、私にはとてもありがたいです!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.87%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる