teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問チェックした順番をcookieに保存したい

編集履歴

質問編集履歴

9

誤字

2018/04/01 16:04

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -638,4 +638,4 @@
638
638
 
639
639
  どうぞよろしくお願い致します。
640
640
 
641
- ちなみにチェックボックスは３００個ほどあります。。
641
+ ちなみにチェックボックスは３００個ほどあります。

8

誤字

2018/04/01 16:04

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- チェックした順番もcookieに保存したい
1
+ チェックした順番をcookieに保存したい
test CHANGED
File without changes

7

誤字

2018/03/31 18:32

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -14,11 +14,15 @@
14
14
 
15
15
 
16
16
 
17
+ しかし、現状で保存されるのは「チェックの有無」だけ。
18
+
19
+
20
+
17
- しかし、現状で保存されるのは「チェックの有無」だけなので、「列の位置」を次回訪問時に復元できません。なので困ったことに、
21
+ なので、せっかく左列に追加したハズの「列の位置」は次回訪問時に復元できません。
18
-
19
-
20
-
22
+
23
+
24
+
21
- 追加項目はHTML構造の位置に行ってしまうのです。
25
+ つまり、次回訪問時には、追加項目が「HTML構造の位置」に行ってしまうのです。
22
26
 
23
27
 
24
28
 

6

誤字

2018/03/31 08:23

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,21 +10,21 @@
10
10
 
11
11
  ###【現状】
12
12
 
13
- チェック項目が左列に追加されるテーブルがあり、cookie保存もできます。
13
+ チェックした項目が左列の位置に追加されるテーブルがあり、cookie保存もできます。
14
-
15
-
16
-
14
+
15
+
16
+
17
- しかし、保存されるのは「チェックの有無」だけなので、「列の位置」を次回訪問時に活かせず、
17
+ しかし、現状で保存されるのは「チェックの有無」だけなので、「列の位置」を次回訪問時に復元できません。なので困ったことに、
18
-
19
-
20
-
18
+
19
+
20
+
21
- 追加項目をその位置で復元できず、HTML構造の位置に行ってしまうのです。
21
+ 追加項目はHTML構造の位置に行ってしまうのです。
22
22
 
23
23
 
24
24
 
25
25
  ![イメージ説明](e7753069a7dc93f32ecc022d20c96ff2.jpeg)
26
26
 
27
- そんなわけで、順番も保存できれば「列の位置」も復元されるのかな？と思い、上述の目的に至った次第です。
27
+ そんなわけで、チェックした順番も保存できれば「列の位置」も復元されるのかな？と思い、上述の目的に至った次第です。
28
28
 
29
29
 
30
30
 

5

誤字

2018/03/31 07:34

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,10 @@
1
1
  ###【目的】
2
2
 
3
- チェックした順番もcookieに保存したいと思っているのですけれど、そのような方法をご教示頂けませんでしょうか？
3
+ チェックした順番もcookieに保存したいのですけれど、そのような方法をご教示頂けませんでしょうか？
4
+
5
+
6
+
7
+ なぜ順番が必要かと言いますと…
4
8
 
5
9
 
6
10
 
@@ -14,13 +18,17 @@
14
18
 
15
19
 
16
20
 
17
- 追加された項目はHTML構造の位置に行ってしまうのです。
21
+ 追加項目をその位置で復元できず、HTML構造の位置に行ってしまうのです。
18
22
 
19
23
 
20
24
 
21
25
  ![イメージ説明](e7753069a7dc93f32ecc022d20c96ff2.jpeg)
22
26
 
23
-
27
+ そんなわけで、順番も保存できれば「列の位置」も復元されるのかな？と思い、上述の目的に至った次第です。
28
+
29
+
30
+
31
+ 以下、現状のサンプルです。
24
32
 
25
33
 
26
34
 
@@ -622,6 +630,8 @@
622
630
 
623
631
  ```
624
632
 
625
- 長くなってすみません。よろしくお願い致します。
633
+ 長くなってすみません。ヒントだけでも嬉しいです。
634
+
635
+ どうぞよろしくお願い致します。
626
636
 
627
637
  ちなみにチェックボックスは３００個ほどあります。。

4

誤字

2018/03/31 07:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -198,9 +198,11 @@
198
198
 
199
199
  //////////////////////////////////
200
200
 
201
+ ////Cookie保存機能
202
+
203
+
204
+
201
- ////ライブラリ「jquery.cookie.js」の中身全部
205
+ //ライブラリ「jquery.cookie.js」の中身
202
-
203
-
204
206
 
205
207
  (function($){
206
208
 
@@ -424,79 +426,193 @@
424
426
 
425
427
 
426
428
 
429
+ //ライブラリ「jquery.cookie.js」の利用
430
+
431
+ (function($){
432
+
433
+ $(function(){
434
+
435
+ if($.cookie("chk_day_selected_value")){
436
+
437
+ $.cookie("chk_day_selected_value").split(",").forEach(function(v){
438
+
439
+ $('input[name=chk_day][value='+v+']').prop('checked',true);
440
+
441
+ });
442
+
443
+ }
444
+
445
+ $('.save').on("click",function(){
446
+
447
+ var v=$('input[name=chk_day]:checked').map(function(){return $(this).val()}).get().join(",");
448
+
449
+ if(v===""){
450
+
451
+ $.removeCookie("chk_day_selected_value");
452
+
453
+ }else{
454
+
455
+ $.cookie("chk_day_selected_value",v);
456
+
457
+ }
458
+
459
+
460
+
461
+ //保存クリック歴の有無を判別するためのクラス追加
462
+
463
+ $.cookie("access",$('body').addClass('access'));
464
+
465
+
466
+
467
+ });
468
+
469
+ });
470
+
471
+ })(jQuery);
472
+
473
+
474
+
475
+
476
+
427
477
 
428
478
 
429
479
  //////////////////////////////////
430
480
 
431
- ////Cookie保存
481
+ ////チェックボックスによる表示切替機能
482
+
483
+
484
+
432
-
485
+ //保存クリック歴がない場合は123にチェックを入れておく
433
-
434
486
 
435
487
  (function($){
436
488
 
437
- $(function(){
438
-
439
- if($.cookie("chk_day_selected_value")){
489
+ if($.cookie("access") == undefined) {
440
-
441
- $.cookie("chk_day_selected_value").split(",").forEach(function(v){
490
+
442
-
443
- $('input[name=chk_day][value='+v+']').prop('checked',true);
491
+ $("#1, #3, #3").prop("checked", true);
444
-
445
- });
492
+
446
-
447
- }
493
+ }
494
+
448
-
495
+ })(jQuery);
496
+
497
+
498
+
499
+
500
+
501
+ //cookie読み込み時の表示
502
+
503
+ (function($){
504
+
505
+ $(document).ready(function () {
506
+
507
+
508
+
449
- $('.save').on("click",function(){
509
+ if ($("#1").prop("checked") == true) {
450
-
451
- var v=$('input[name=chk_day]:checked').map(function(){return $(this).val()}).get().join(",");
510
+
452
-
453
- if(v===""){
454
-
455
- $.removeCookie("chk_day_selected_value");
511
+ $(".1").css('display', 'table-cell');
456
-
512
+
457
- }else{
513
+ } else {
458
-
514
+
459
- $.cookie("chk_day_selected_value",v);
515
+ $(".1").css('display', 'none');
460
516
 
461
517
  }
462
518
 
463
-
464
-
465
- //保存クリック歴の有無を判別するためのクラス追加
466
-
467
- $.cookie("access",$('body').addClass('access'));
468
-
469
519
 
470
520
 
521
+ if ($("#2").prop("checked") == true) {
522
+
523
+ $(".2").css('display', 'table-cell');
524
+
525
+ } else {
526
+
527
+ $(".2").css('display', 'none');
528
+
529
+ }
530
+
531
+
532
+
533
+ if ($("#3").prop("checked") == true) {
534
+
535
+ $(".3").css('display', 'table-cell');
536
+
537
+ } else {
538
+
539
+ $(".3").css('display', 'none');
540
+
541
+ }
542
+
543
+
544
+
545
+ if ($("#4").prop("checked") == true) {
546
+
547
+ $(".4").css('display', 'table-cell');
548
+
549
+ } else {
550
+
551
+ $(".4").css('display', 'none');
552
+
553
+ }
554
+
555
+
556
+
557
+ if ($("#5").prop("checked") == true) {
558
+
559
+ $(".5").css('display', 'table-cell');
560
+
561
+ } else {
562
+
563
+ $(".5").css('display', 'none');
564
+
565
+ }
566
+
567
+
568
+
471
- });
569
+ })
472
-
473
- });
474
570
 
475
571
  })(jQuery);
476
572
 
477
573
 
478
574
 
479
-
480
-
481
-
482
-
483
- //////////////////////////////////
484
-
485
- ////チェックボックス
575
+ //選択時に項目追加
486
-
487
-
488
-
489
-
490
-
491
- //チェックボックス_保存クリック歴がない場合は123にチェックを入れておく
492
576
 
493
577
  (function($){
494
578
 
495
- if($.cookie("access") == undefined) {
579
+
496
-
580
+
497
- $("#1, #3, #3").prop("checked", true);
581
+ $('input[name="chk_day"]').change(function(event) {
582
+
498
-
583
+ event.preventDefault();
584
+
585
+ var id = $(this).attr('id');
586
+
587
+ $('.' + id)
588
+
589
+ .toggle()
590
+
591
+ .each(function(){
592
+
593
+ if ($(this).css('display') == 'table-cell')
594
+
595
+ $(this)
596
+
597
+ .parent()
598
+
599
+ .find('.left')
600
+
601
+ .before(this)
602
+
603
+ .removeClass('left')
604
+
605
+ .end()
606
+
607
+ .end()
608
+
609
+ .addClass('left');
610
+
499
- }
611
+ });
612
+
613
+ });
614
+
615
+
500
616
 
501
617
  })(jQuery);
502
618
 
@@ -504,124 +620,8 @@
504
620
 
505
621
 
506
622
 
507
- //チェックボックス_cookie読み込み時の表示
508
-
509
- (function($){
510
-
511
- $(document).ready(function () {
512
-
513
-
514
-
515
- if ($("#1").prop("checked") == true) {
516
-
517
- $(".1").css('display', 'table-cell');
518
-
519
- } else {
520
-
521
- $(".1").css('display', 'none');
522
-
523
- }
524
-
525
-
526
-
527
- if ($("#2").prop("checked") == true) {
528
-
529
- $(".2").css('display', 'table-cell');
530
-
531
- } else {
532
-
533
- $(".2").css('display', 'none');
534
-
535
- }
536
-
537
-
538
-
539
- if ($("#3").prop("checked") == true) {
540
-
541
- $(".3").css('display', 'table-cell');
542
-
543
- } else {
544
-
545
- $(".3").css('display', 'none');
546
-
547
- }
548
-
549
-
550
-
551
- if ($("#4").prop("checked") == true) {
552
-
553
- $(".4").css('display', 'table-cell');
554
-
555
- } else {
556
-
557
- $(".4").css('display', 'none');
558
-
559
- }
560
-
561
-
562
-
563
- if ($("#5").prop("checked") == true) {
564
-
565
- $(".5").css('display', 'table-cell');
566
-
567
- } else {
568
-
569
- $(".5").css('display', 'none');
570
-
571
- }
572
-
573
-
574
-
575
- })
576
-
577
- })(jQuery);
578
-
579
-
580
-
581
- //チェックボックス_選択時の追加
582
-
583
- (function($){
584
-
585
-
586
-
587
- $('input[name="chk_day"]').change(function(event) {
588
-
589
- event.preventDefault();
590
-
591
- var id = $(this).attr('id');
592
-
593
- $('.' + id)
594
-
595
- .toggle()
596
-
597
- .each(function(){
598
-
599
- if ($(this).css('display') == 'table-cell')
600
-
601
- $(this)
602
-
603
- .parent()
604
-
605
- .find('.left')
606
-
607
- .before(this)
608
-
609
- .removeClass('left')
610
-
611
- .end()
612
-
613
- .end()
614
-
615
- .addClass('left');
616
-
617
- });
618
-
619
- });
620
-
621
-
622
-
623
- })(jQuery);
624
-
625
-
626
-
627
623
  ```
624
+
625
+ 長くなってすみません。よろしくお願い致します。
626
+
627
+ ちなみにチェックボックスは３００個ほどあります。。

3

誤字

2018/03/30 21:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -44,23 +44,33 @@
44
44
 
45
45
  <label for="1">
46
46
 
47
- <input id="1" class="check" type="checkbox" name="chk_day" value="1">1</label>
47
+ <input id="1" class="check" type="checkbox" name="chk_day" value="1">1
48
+
49
+ </label>
48
50
 
49
51
  <label for="2">
50
52
 
51
- <input id="2" class="check" type="checkbox" name="chk_day" value="2">2</label>
53
+ <input id="2" class="check" type="checkbox" name="chk_day" value="2">2
54
+
55
+ </label>
52
56
 
53
57
  <label for="3">
54
58
 
55
- <input id="3" class="check" type="checkbox" name="chk_day" value="3">3</label>
59
+ <input id="3" class="check" type="checkbox" name="chk_day" value="3">3
60
+
61
+ </label>
56
62
 
57
63
  <label for="4">
58
64
 
59
- <input id="4" class="check" type="checkbox" name="chk_day" value="4">4</label>
65
+ <input id="4" class="check" type="checkbox" name="chk_day" value="4">4
66
+
67
+ </label>
60
68
 
61
69
  <label for="5">
62
70
 
63
- <input id="5" class="check" type="checkbox" name="chk_day" value="5">5</label>
71
+ <input id="5" class="check" type="checkbox" name="chk_day" value="5">5
72
+
73
+ </label>
64
74
 
65
75
  </div>
66
76
 

2

誤字

2018/03/30 21:35

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -42,15 +42,25 @@
42
42
 
43
43
  <div class="check-wrap">
44
44
 
45
+ <label for="1">
46
+
45
- <label for="1"><input id="1" class="check" type="checkbox" name="chk_day" value="1">1</label>
47
+ <input id="1" class="check" type="checkbox" name="chk_day" value="1">1</label>
48
+
46
-
49
+ <label for="2">
50
+
47
- <label for="2"><input id="2" class="check" type="checkbox" name="chk_day" value="2">2</label>
51
+ <input id="2" class="check" type="checkbox" name="chk_day" value="2">2</label>
52
+
48
-
53
+ <label for="3">
54
+
49
- <label for="3"><input id="3" class="check" type="checkbox" name="chk_day" value="3">3</label>
55
+ <input id="3" class="check" type="checkbox" name="chk_day" value="3">3</label>
56
+
50
-
57
+ <label for="4">
58
+
51
- <label for="4"><input id="4" class="check" type="checkbox" name="chk_day" value="4">4</label>
59
+ <input id="4" class="check" type="checkbox" name="chk_day" value="4">4</label>
60
+
52
-
61
+ <label for="5">
62
+
53
- <label for="5"><input id="5" class="check" type="checkbox" name="chk_day" value="5">5</label>
63
+ <input id="5" class="check" type="checkbox" name="chk_day" value="5">5</label>
54
64
 
55
65
  </div>
56
66
 

1

誤字

2018/03/30 21:33

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -44,9 +44,9 @@
44
44
 
45
45
  <label for="1"><input id="1" class="check" type="checkbox" name="chk_day" value="1">1</label>
46
46
 
47
- <label for="2"><input id="2" class="check" type="checkbox" name="chk_day" value="2" checked>2</label>
47
+ <label for="2"><input id="2" class="check" type="checkbox" name="chk_day" value="2">2</label>
48
-
48
+
49
- <label for="3"><input id="3" class="check" type="checkbox" name="chk_day" value="3" checked>3</label>
49
+ <label for="3"><input id="3" class="check" type="checkbox" name="chk_day" value="3">3</label>
50
50
 
51
51
  <label for="4"><input id="4" class="check" type="checkbox" name="chk_day" value="4">4</label>
52
52