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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

3510閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/03/30 21:28

編集2022/01/12 10:55

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

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

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

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

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

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

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

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

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

▼上のコード

html

1<!-- チェック項目 --> 2<div> 3 <div class="check-wrap"> 4 <label for="1"> 5 <input id="1" class="check" type="checkbox" name="chk_day" value="1">1 6 </label> 7 <label for="2"> 8 <input id="2" class="check" type="checkbox" name="chk_day" value="2">2 9 </label> 10 <label for="3"> 11 <input id="3" class="check" type="checkbox" name="chk_day" value="3">3 12 </label> 13 <label for="4"> 14 <input id="4" class="check" type="checkbox" name="chk_day" value="4">4 15 </label> 16 <label for="5"> 17 <input id="5" class="check" type="checkbox" name="chk_day" value="5">5 18 </label> 19 </div> 20 <div class="save">保存</div> 21</div> 22 23<!-- テーブル --> 24<table> 25 <thead> 26 <tr> 27 <th class="name-title"></th> 28 <th class="1 left">1</th> 29 <th class="2">2</th> 30 <th class="3">3</th> 31 <th class="4">4</th> 32 <th class="5">5</th> 33 </tr> 34 </thead> 35 <tbody> 36 <tr> 37 <td class="name"></td> 38 <td class="1 left">あ1</td> 39 <td class="2">あ2</td> 40 <td class="3">あ3</td> 41 <td class="4">あ4</td> 42 <td class="5">あ5</td> 43 </tr> 44 <tr> 45 <td class="name"></td> 46 <td class="1 left">い1</td> 47 <td class="2">い2</td> 48 <td class="3">い3</td> 49 <td class="4">い4</td> 50 <td class="5">い5</td> 51 </tr> 52 <tr> 53 <td class="name"></td> 54 <td class="1 left">う1</td> 55 <td class="2">う2</td> 56 <td class="3">う3</td> 57 <td class="4">う4</td> 58 <td class="5">う5</td> 59 </tr> 60 <tr> 61 <td class="name"></td> 62 <td class="1 left">え1</td> 63 <td class="2">え2</td> 64 <td class="3">え3</td> 65 <td class="4">え4</td> 66 <td class="5">え5</td> 67 </tr> 68 <tr> 69 <td class="name"></td> 70 <td class="1 left">お1</td> 71 <td class="2">お2</td> 72 <td class="3">お3</td> 73 <td class="4">お4</td> 74 <td class="5">お5</td> 75 </tr> 76 </tbody> 77</table>

javascript

1////////////////////////////////// 2////Cookie保存機能 3 4//ライブラリ「jquery.cookie.js」の中身 5(function($){ 6(function (factory) { 7 if (typeof define === 'function' && define.amd) { 8 // AMD (Register as an anonymous module) 9 define(['jquery'], factory); 10 } else if (typeof exports === 'object') { 11 // Node/CommonJS 12 module.exports = factory(require('jquery')); 13 } else { 14 // Browser globals 15 factory(jQuery); 16 } 17}(function ($) { 18 19 var pluses = /+/g; 20 21 function encode(s) { 22 return config.raw ? s : encodeURIComponent(s); 23 } 24 25 function decode(s) { 26 return config.raw ? s : decodeURIComponent(s); 27 } 28 29 function stringifyCookieValue(value) { 30 return encode(config.json ? JSON.stringify(value) : String(value)); 31 } 32 33 function parseCookieValue(s) { 34 if (s.indexOf('"') === 0) { 35 // This is a quoted cookie as according to RFC2068, unescape... 36 s = s.slice(1, -1).replace(/\"/g, '"').replace(/\\/g, '\'); 37 } 38 39 try { 40 // Replace server-side written pluses with spaces. 41 // If we can't decode the cookie, ignore it, it's unusable. 42 // If we can't parse the cookie, ignore it, it's unusable. 43 s = decodeURIComponent(s.replace(pluses, ' ')); 44 return config.json ? JSON.parse(s) : s; 45 } catch(e) {} 46 } 47 48 function read(s, converter) { 49 var value = config.raw ? s : parseCookieValue(s); 50 return $.isFunction(converter) ? converter(value) : value; 51 } 52 53 var config = $.cookie = function (key, value, options) { 54 55 // Write 56 57 if (arguments.length > 1 && !$.isFunction(value)) { 58 options = $.extend({}, config.defaults, options); 59 60 if (typeof options.expires === 'number') { 61 var days = options.expires, t = options.expires = new Date(); 62 t.setMilliseconds(t.getMilliseconds() + days * 864e+5); 63 } 64 65 return (document.cookie = [ 66 encode(key), '=', stringifyCookieValue(value), 67 options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE 68 options.path ? '; path=' + options.path : '', 69 options.domain ? '; domain=' + options.domain : '', 70 options.secure ? '; secure' : '' 71 ].join('')); 72 } 73 74 // Read 75 76 var result = key ? undefined : {}, 77 // To prevent the for loop in the first place assign an empty array 78 // in case there are no cookies at all. Also prevents odd result when 79 // calling $.cookie(). 80 cookies = document.cookie ? document.cookie.split('; ') : [], 81 i = 0, 82 l = cookies.length; 83 84 for (; i < l; i++) { 85 var parts = cookies[i].split('='), 86 name = decode(parts.shift()), 87 cookie = parts.join('='); 88 89 if (key === name) { 90 // If second argument (value) is a function it's a converter... 91 result = read(cookie, value); 92 break; 93 } 94 95 // Prevent storing a cookie that we couldn't decode. 96 if (!key && (cookie = read(cookie)) !== undefined) { 97 result[name] = cookie; 98 } 99 } 100 101 return result; 102 }; 103 104 config.defaults = {}; 105 106 $.removeCookie = function (key, options) { 107 // Must not alter options, thus extending a fresh object... 108 $.cookie(key, '', $.extend({}, options, { expires: -1 })); 109 return !$.cookie(key); 110 }; 111 112})); 113})(jQuery); 114 115 116//ライブラリ「jquery.cookie.js」の利用 117(function($){ 118$(function(){ 119 if($.cookie("chk_day_selected_value")){ 120 $.cookie("chk_day_selected_value").split(",").forEach(function(v){ 121 $('input[name=chk_day][value='+v+']').prop('checked',true); 122 }); 123 } 124 $('.save').on("click",function(){ 125 var v=$('input[name=chk_day]:checked').map(function(){return $(this).val()}).get().join(","); 126 if(v===""){ 127 $.removeCookie("chk_day_selected_value"); 128 }else{ 129 $.cookie("chk_day_selected_value",v); 130 } 131 132 //保存クリック歴の有無を判別するためのクラス追加 133 $.cookie("access",$('body').addClass('access')); 134 135 }); 136}); 137})(jQuery); 138 139 140 141////////////////////////////////// 142////チェックボックスによる表示切替機能 143 144//保存クリック歴がない場合は123にチェックを入れておく 145(function($){ 146 if($.cookie("access") == undefined) { 147 $("#1, #3, #3").prop("checked", true); 148 } 149})(jQuery); 150 151 152//cookie読み込み時の表示 153(function($){ 154$(document).ready(function () { 155 156 if ($("#1").prop("checked") == true) { 157 $(".1").css('display', 'table-cell'); 158 } else { 159 $(".1").css('display', 'none'); 160 } 161 162 if ($("#2").prop("checked") == true) { 163 $(".2").css('display', 'table-cell'); 164 } else { 165 $(".2").css('display', 'none'); 166 } 167 168 if ($("#3").prop("checked") == true) { 169 $(".3").css('display', 'table-cell'); 170 } else { 171 $(".3").css('display', 'none'); 172 } 173 174 if ($("#4").prop("checked") == true) { 175 $(".4").css('display', 'table-cell'); 176 } else { 177 $(".4").css('display', 'none'); 178 } 179 180 if ($("#5").prop("checked") == true) { 181 $(".5").css('display', 'table-cell'); 182 } else { 183 $(".5").css('display', 'none'); 184 } 185 186}) 187})(jQuery); 188 189//選択時に項目追加 190(function($){ 191 192 $('input[name="chk_day"]').change(function(event) { 193 event.preventDefault(); 194 var id = $(this).attr('id'); 195 $('.' + id) 196 .toggle() 197 .each(function(){ 198 if ($(this).css('display') == 'table-cell') 199 $(this) 200 .parent() 201 .find('.left') 202 .before(this) 203 .removeClass('left') 204 .end() 205 .end() 206 .addClass('left'); 207 }); 208 }); 209 210})(jQuery); 211 212

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

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

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

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

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

投稿2018/03/31 01:42

alg

総合スコア2019

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/03/31 02:10

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問