teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

8

ベストアンサーとの整合性をとるため質問文をもとに戻しました

2018/04/16 10:10

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,248 +1,16 @@
1
- ###目的
1
+ ###現状
2
- 「jquery-ui.min.js」テーブルの行をドラッグする機能をつけました。
2
+ 「jquery-ui.min.js」と「jquery.cookie.js」によってテーブルの行のcookie保存機能を作りました。
3
3
 
4
- しかし、やたらと重く困っています。
4
+ 一応機能はできたのですが行を多く(300行ほど)するとやたらと重くなり困っています。
5
5
 
6
- ```
6
+ ###目的
7
- ////一気にドラッグ←こいついで重い!
7
+ そこで、「jquery-ui.min.js」から、「行をドラッグで移動する機能」などを削除し「行位置をcookie保存する機能」だけを残したいです。
8
- (function($){
9
-
10
- })(jQuery);
11
- ```
12
8
 
13
- こちら部分がダメようですがち原因がわかりません
9
+ (ドラッグで移動した行を保存するではく、別の方法行を追加していま。なのでそれ保存できればいいと思い、「jquery-ui.min.js」を採用しただけなので
14
10
 
15
- 次のコード重くなる原因がどこにある?またそれはどう解決ればいいか?ご教示いただけませんでしょうか?(テーブルの行は300行ほどあります…)
11
+ どなたか、「jquery-ui.min.js」ら「行の位置をcookie保存る機能」だけを残す、という方法をご存じありませんでしょうか?
16
12
 
17
- ###現状のコード
13
+ ###補足
18
- チェックボックスよって行の表示が切り替わり表示されるときは常にテーブル表示されるようになってい
14
+ ちなみに、ページ([https://jqueryui.com/download/](https://jqueryui.com/download/))「jquery-ui.min.js」のカスタムダウンロードがありした
19
15
 
20
- 長くなってしまって申し訳ございません。
21
- ```javascript
22
- /******************************
23
- /* jquery.ui.min.jsを使った機能
24
- *******************************/
25
-
26
- ////テーブルの順序をcookie保存
27
- (function($){
28
- $(function() {
29
- $(".sortable").sortable();
30
- $(".sortable").disableSelection();
31
- $('body').on("click",'.save',function(){
32
- var updateArray = $(".sortable").sortable("toArray").join(",");
33
- $.cookie("sortable", updateArray, {expires: 30});
34
-
35
- });
36
- if($.cookie("sortable")) {
37
- var cookieValue = $.cookie("sortable").split(",").reverse();
38
- $.each(
39
- cookieValue,
40
- function(index, value) {$('#'+value).prependTo(".sortable");}
41
- );
42
- }
43
- });
44
- })(jQuery);
45
-
46
- ////一気にドラッグ←こいつのせいで重い!
47
- (function($){
48
- $('.table1 tbody').selectable({
49
- cancel: '.sort-handle, .ui-selected',
50
- }).sortable({
51
- placeholder: "ui-state-highlight",
52
- axis: 'y',
53
- opacity: 0.9,
54
- items: "> tr",
55
- handle: 'td, .sort-handle, .ui-selected',
56
- helper: function(e, item){
57
- if (!item.hasClass('ui-selected')){
58
- item.parent().children('.ui-selected').removeClass('ui-selected');
59
- item.addClass('ui-selected');
60
- }
61
- var selected = item.parent().children('.ui-selected').clone();
62
- ph = item.outerHeight() * selected.length;
63
- item.data('multidrag', selected).siblings('.ui-selected').remove();
64
- return $('<tr/>').append(selected);
65
- },
66
- cursor: "move",
67
- start: function(e, ui){
68
- ui.placeholder.css({'height':ph});
69
- },
70
- stop: function(e, ui){
71
- var selected = ui.item.data('multidrag');
72
- ui.item.after(selected);
73
- ui.item.remove();
74
- selected.removeClass('ui-selected');
75
- $(selected).children("td").removeClass('ui-selected');
76
- },
77
- update: function(e, ui){
78
- console.log("updated !!");
79
- }
80
- });
81
- })(jQuery);
82
-
83
-
84
- ////テーブル外クリックで選択解除
85
- (function($){
86
- $('body').on("click",function(){
87
- $('tr').removeClass('ui-selected');
88
- });
89
- })(jQuery);
90
-
91
-
92
- /******************************
93
- /* jquery.cookie.jsを使った機能
94
- *******************************/
95
-
96
- ////チェックの有無をcookie保存
97
- (function($){
98
- $(function(){
99
-
100
- //supportのチェック項目を保存
101
- if($.cookie("chk_support_selected_value")){
102
- $.cookie("chk_support_selected_value").split(",").forEach(function(v){
103
- $('input[name=chk_support][value='+v+']').prop('checked',true);
104
- });
105
- }
106
- $('.save').on("click",function(){
107
- var v=$('input[name=chk_support]:checked').map(function(){return $(this).val()}).get().join(",");
108
- if(v===""){
109
- $.removeCookie("chk_support_selected_value");
110
- }else{
111
- $.cookie("chk_support_selected_value",v);
112
- }
113
- });
114
- //support(未指定の場合)のチェック項目を保存
115
- if($.cookie("chk_support_un_selected_value")){
116
- $.cookie("chk_support_un_selected_value").split(",").forEach(function(v){
16
+ ここから「Sortable.min.js」だけをダウンロードして使ってみましたが、他のjQueryまで作動してくれなくなってしまったので、別のものだと思うのですが…見当がつきません。
117
- $('input[name=chk_support_un][value='+v+']').prop('checked',true);
118
- });
119
- }
120
- $('.save').on("click",function(){
121
- var v=$('input[name=chk_support_un]:checked').map(function(){return $(this).val()}).get().join(",");
122
- if(v===""){
123
- $.removeCookie("chk_support_un_selected_value");
124
- }else{
125
- $.cookie("chk_support_un_selected_value",v);
126
- }
127
- });
128
-
129
- //pointのチェック項目を保存
130
- if($.cookie("chk_point_selected_value")){
131
- $.cookie("chk_point_selected_value").split(",").forEach(function(v){
132
- $('input[name=chk_point][value='+v+']').prop('checked',true);
133
- });
134
- }
135
- $('.save').on("click",function(){
136
- var v=$('input[name=chk_point]:checked').map(function(){return $(this).val()}).get().join(",");
137
- if(v===""){
138
- $.removeCookie("chk_point_selected_value");
139
- }else{
140
- $.cookie("chk_point_selected_value",v);
141
- }
142
- });
143
-
144
- //volumeのチェック項目を保存
145
- if($.cookie("chk_volume_selected_value")){
146
- $.cookie("chk_volume_selected_value").split(",").forEach(function(v){
147
- $('input[name=chk_volume][value='+v+']').prop('checked',true);
148
- });
149
- }
150
- $('.fluits_save').on("click",function(){
151
- var v=$('input[name=chk_volume]:checked').map(function(){return $(this).val()}).get().join(",");
152
- if(v===""){
153
- $.removeCookie("chk_volume_selected_value");
154
- }else{
155
- $.cookie("chk_volume_selected_value",v);
156
- }
157
- });
158
-
159
- //fluitsのチェック項目を保存
160
- if($.cookie("chk_fluits_selected_value")){
161
- $.cookie("chk_fluits_selected_value").split(",").forEach(function(v){
162
- $('input[name=chk_fluits][value='+v+']').prop('checked',true);
163
- });
164
- }
165
- $('.save').on("click",function(){
166
- var v=$('input[name=chk_fluits]:checked').map(function(){return $(this).val()}).get().join(",");
167
- if(v===""){
168
- $.removeCookie("chk_fluits_selected_value");
169
- }else{
170
- $.cookie("chk_fluits_selected_value",v);
171
- }
172
- });
173
-
174
- });
175
- })(jQuery);
176
-
177
-
178
- /*******************************
179
- /* 初回読み込み時の自動チェック機能
180
- *******************************/
181
-
182
- //保存クリック履歴ないときのチェック
183
- (function($){
184
- $(document).ready(function(){
185
- if($.cookie("access") == undefined) {
186
- //保存クリック履歴ないときのsupportチェック
187
- $('#support1').prop("checked", true);
188
- //保存クリック履歴ないときのpointチェック
189
- $('#point1').prop("checked", true);
190
- //保存クリック履歴ないときのvolumeチェック
191
- $('#volume1').prop("checked", true);
192
- $('#volume1_un').prop("checked", true);
193
- //保存クリック履歴ないときのfluitsチェック
194
- $('#apple, #banana, #grape').prop("checked", true);
195
- }
196
- });
197
-
198
- //保存クリック履歴有無判別のためのcookie保存
199
- $('body').on("click",'.save',function(){
200
- $.cookie("access","hello", { expires: 365 , path: "/" });
201
- });
202
-
203
- })(jQuery);
204
-
205
-
206
- /*******************************
207
- /* 読み込み時の自動表示機能
208
- *******************************/
209
-
210
- (function($){
211
- $(document).ready(function () {
212
-
213
- //support表示切替
214
- $('input[name="chk_support"]').each(function(){
215
- if ($(this).prop("checked") == true) {
216
- $( '.' + $(this).attr('id') ).css('display', 'table-cell');
217
- } else {
218
- $( '.' + $(this).attr('id') ).css('display', 'none');
219
- }
220
- });
221
- $('input[name="chk_support_un"]').each(function(){
222
- if ($(this).prop("checked") == true) {
223
- $('.tablerow thead tr th, .tablerow tbody tr td').css('display', 'table-cell');
224
- }
225
- });
226
-
227
- //point表示切替
228
- $('input[name="chk_point"]').each(function(){
229
- if ($(this).prop("checked") == true) {
230
- $( '.' + $(this).attr('id') ).css('display', 'table-row');
231
- } else {
232
- $( '.' + $(this).attr('id') ).css('display', 'none');
233
- }
234
- });
235
-
236
- //fluits表示切替
237
- $('input[name="chk_fluits"]').each(function(){
238
- if ($(this).prop("checked") == true) {
239
- $( '.' + $(this).attr('id') ).css('display', 'table-row');
240
- } else {
241
- $( '.' + $(this).attr('id') ).css('display', 'none');
242
- }
243
- });
244
-
245
- });
246
- })(jQuery);
247
-
248
- ```

7

誤字

2018/04/16 10:10

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,21 +1,22 @@
1
- ###現状
1
+ ###目的
2
- 「jquery-ui.min.js」と「jquery.cookie.js」によってテーブルの行のcookie保存機能を作りました。
2
+ 「jquery-ui.min.js」テーブルの行をドラッグする機能をつけました。
3
3
 
4
- 一応機能はできたのですが行を多く(300行ほど)するとやたらと重くなり困っています。
4
+ しかし、やたらと重く困っています。
5
5
 
6
+ ```
7
+ ////一気にドラッグ←こいつのせいで重い!
8
+ (function($){
9
+
10
+ })(jQuery);
11
+ ```
6
12
 
7
- ###目的
8
- で、「jquery-ui.min.js」か、「行をドラッグで移動する機能」などを削除し「行位置をcookie保存する機能」だけを残したいです。
13
+ らの部分がダメなようですが、いまいち原因がわかりません
9
14
 
10
- (ドラッグで移動した行を保存するではなくチェックボックスで行を追加しています。のでその状態保存できればいいと思、「jquery-ui.min.js」を採用しただけなの、ドラッグなどは不要な
15
+ コードから重くる原因どこにあるか?またそはどう解決すればいいか?ご教示いただけませんしょうか?(テーブル行は300行ほどありま
11
16
 
12
- どなたか、「jquery-ui.min.js」から「行の位置をcookie保存する機能」だけを残す、という方法をご存じありませんでしょうか?
13
-
14
- ###追記
17
+ ###現状のコード
15
18
  チェックボックスによって行の表示が切り替わり、表示されるときは常にテーブルの上に表示されるようになっています。
16
19
 
17
- その表示切替機能とcookie保存機能のあたりを次に追記いたします。
18
-
19
20
  長くなってしまって申し訳ございません。
20
21
  ```javascript
21
22
  /******************************
@@ -42,7 +43,52 @@
42
43
  });
43
44
  })(jQuery);
44
45
 
46
+ ////一気にドラッグ←こいつのせいで重い!
47
+ (function($){
48
+ $('.table1 tbody').selectable({
49
+ cancel: '.sort-handle, .ui-selected',
50
+ }).sortable({
51
+ placeholder: "ui-state-highlight",
52
+ axis: 'y',
53
+ opacity: 0.9,
54
+ items: "> tr",
55
+ handle: 'td, .sort-handle, .ui-selected',
56
+ helper: function(e, item){
57
+ if (!item.hasClass('ui-selected')){
58
+ item.parent().children('.ui-selected').removeClass('ui-selected');
59
+ item.addClass('ui-selected');
60
+ }
61
+ var selected = item.parent().children('.ui-selected').clone();
62
+ ph = item.outerHeight() * selected.length;
63
+ item.data('multidrag', selected).siblings('.ui-selected').remove();
64
+ return $('<tr/>').append(selected);
65
+ },
66
+ cursor: "move",
67
+ start: function(e, ui){
68
+ ui.placeholder.css({'height':ph});
69
+ },
70
+ stop: function(e, ui){
71
+ var selected = ui.item.data('multidrag');
72
+ ui.item.after(selected);
73
+ ui.item.remove();
74
+ selected.removeClass('ui-selected');
75
+ $(selected).children("td").removeClass('ui-selected');
76
+ },
77
+ update: function(e, ui){
78
+ console.log("updated !!");
79
+ }
80
+ });
81
+ })(jQuery);
45
82
 
83
+
84
+ ////テーブル外クリックで選択解除
85
+ (function($){
86
+ $('body').on("click",function(){
87
+ $('tr').removeClass('ui-selected');
88
+ });
89
+ })(jQuery);
90
+
91
+
46
92
  /******************************
47
93
  /* jquery.cookie.jsを使った機能
48
94
  *******************************/

6

誤字

2018/04/16 09:55

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -42,42 +42,6 @@
42
42
  });
43
43
  })(jQuery);
44
44
 
45
- ////sortableで一気にドラッグ
46
- (function($){
47
- $('.table tbody').selectable({
48
- cancel: '.sort-handle, .ui-selected',
49
- }).sortable({
50
- placeholder: "ui-state-highlight",
51
- axis: 'y',
52
- opacity: 0.9,
53
- items: "> tr",
54
- handle: 'td, .sort-handle, .ui-selected',
55
- helper: function(e, item){
56
- if (!item.hasClass('ui-selected')){
57
- item.parent().children('.ui-selected').removeClass('ui-selected');
58
- item.addClass('ui-selected');
59
- }
60
- var selected = item.parent().children('.ui-selected').clone();
61
- ph = item.outerHeight() * selected.length;
62
- item.data('multidrag', selected).siblings('.ui-selected').remove();
63
- return $('<tr/>').append(selected);
64
- },
65
- cursor: "move",
66
- start: function(e, ui){
67
- ui.placeholder.css({'height':ph});
68
- },
69
- stop: function(e, ui){
70
- var selected = ui.item.data('multidrag');
71
- ui.item.after(selected);
72
- ui.item.remove();
73
- selected.removeClass('ui-selected');
74
- $(selected).children("td").removeClass('ui-selected');
75
- },
76
- update: function(e, ui){
77
- console.log("updated !!");
78
- }
79
- });
80
- })(jQuery);
81
45
 
82
46
  /******************************
83
47
  /* jquery.cookie.jsを使った機能

5

誤字

2018/04/16 09:44

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -42,6 +42,42 @@
42
42
  });
43
43
  })(jQuery);
44
44
 
45
+ ////sortableで一気にドラッグ
46
+ (function($){
47
+ $('.table tbody').selectable({
48
+ cancel: '.sort-handle, .ui-selected',
49
+ }).sortable({
50
+ placeholder: "ui-state-highlight",
51
+ axis: 'y',
52
+ opacity: 0.9,
53
+ items: "> tr",
54
+ handle: 'td, .sort-handle, .ui-selected',
55
+ helper: function(e, item){
56
+ if (!item.hasClass('ui-selected')){
57
+ item.parent().children('.ui-selected').removeClass('ui-selected');
58
+ item.addClass('ui-selected');
59
+ }
60
+ var selected = item.parent().children('.ui-selected').clone();
61
+ ph = item.outerHeight() * selected.length;
62
+ item.data('multidrag', selected).siblings('.ui-selected').remove();
63
+ return $('<tr/>').append(selected);
64
+ },
65
+ cursor: "move",
66
+ start: function(e, ui){
67
+ ui.placeholder.css({'height':ph});
68
+ },
69
+ stop: function(e, ui){
70
+ var selected = ui.item.data('multidrag');
71
+ ui.item.after(selected);
72
+ ui.item.remove();
73
+ selected.removeClass('ui-selected');
74
+ $(selected).children("td").removeClass('ui-selected');
75
+ },
76
+ update: function(e, ui){
77
+ console.log("updated !!");
78
+ }
79
+ });
80
+ })(jQuery);
45
81
 
46
82
  /******************************
47
83
  /* jquery.cookie.jsを使った機能

4

誤字

2018/04/16 09:43

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -7,7 +7,7 @@
7
7
  ###目的
8
8
  そこで、「jquery-ui.min.js」から、「行をドラッグで移動する機能」などを削除し「行の位置をcookie保存する機能」だけを残したいです。
9
9
 
10
- (ドラッグで移動した行を保存するのではなく、チェックボックスで行を追加しています。なのでその状態が保存できればいいと思い、「jquery-ui.min.js」を採用しただけなので。)
10
+ (ドラッグで移動した行を保存するのではなく、チェックボックスで行を追加しています。なのでその状態が保存できればいいと思い、「jquery-ui.min.js」を採用しただけなので、ドラッグなどは不要なのです。)
11
11
 
12
12
  どなたか、「jquery-ui.min.js」から「行の位置をcookie保存する機能」だけを残す、という方法をご存じありませんでしょうか?
13
13
 

3

誤字

2018/04/16 09:37

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -7,18 +7,16 @@
7
7
  ###目的
8
8
  そこで、「jquery-ui.min.js」から、「行をドラッグで移動する機能」などを削除し「行の位置をcookie保存する機能」だけを残したいです。
9
9
 
10
- (ドラッグで移動した行を保存するのではなく、別の方法で行を追加しています。なのでそが保存できればいいと思い、「jquery-ui.min.js」を採用しただけなので。)
10
+ (ドラッグで移動した行を保存するのではなく、チェックボックスで行を追加しています。なのでその状態が保存できればいいと思い、「jquery-ui.min.js」を採用しただけなので。)
11
11
 
12
12
  どなたか、「jquery-ui.min.js」から「行の位置をcookie保存する機能」だけを残す、という方法をご存じありませんでしょうか?
13
13
 
14
- ###補足
14
+ ###追記
15
+ チェックボックスによって行の表示が切り替わり、表示されるときは常にテーブルの上に表示されるようになっています。
15
16
 
16
- ちなみに、こページ([https://jqueryui.com/download/](https://jqueryui.com/download/))に「jquery-ui.min.js」カスタムダウンロードがありました。
17
+ 表示切替機能とcookie保存機能のあを次に追記いします
17
18
 
18
- ここから「Sortable.min.js」だけをダウンロードして使ってみましたが、他のjQueryまで作動してくれなくなってしまったので、別のものだと思うのですが…見当がつきません。
19
-
20
- ###追記
21
- 現状のjQueryのcookie保存まわりを追記致します。長くなってしまって申し訳ございません。
19
+ 長くなってしまって申し訳ございません。
22
20
  ```javascript
23
21
  /******************************
24
22
  /* jquery.ui.min.jsを使った機能

2

誤字

2018/04/16 09:36

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  ###現状
2
2
  「jquery-ui.min.js」と「jquery.cookie.js」によってテーブルの行のcookie保存機能を作りました。
3
3
 
4
- 一応機能はできたのですが、行を多くするとやたらと重くなり困っています。
4
+ 一応機能はできたのですが、行を多く(300行ほど)するとやたらと重くなり困っています。
5
5
 
6
6
 
7
7
  ###目的

1

追記

2018/04/16 09:31

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -15,4 +15,190 @@
15
15
 
16
16
  ちなみに、このページ([https://jqueryui.com/download/](https://jqueryui.com/download/))に「jquery-ui.min.js」のカスタムダウンロードがありました。
17
17
 
18
- ここから「Sortable.min.js」だけをダウンロードして使ってみましたが、他のjQueryまで作動してくれなくなってしまったので、別のものだと思うのですが…見当がつきません。
18
+ ここから「Sortable.min.js」だけをダウンロードして使ってみましたが、他のjQueryまで作動してくれなくなってしまったので、別のものだと思うのですが…見当がつきません。
19
+
20
+ ###追記
21
+ 現状のjQueryのcookie保存まわりを追記致します。長くなってしまって申し訳ございません。
22
+ ```javascript
23
+ /******************************
24
+ /* jquery.ui.min.jsを使った機能
25
+ *******************************/
26
+
27
+ ////テーブルの順序をcookie保存
28
+ (function($){
29
+ $(function() {
30
+ $(".sortable").sortable();
31
+ $(".sortable").disableSelection();
32
+ $('body').on("click",'.save',function(){
33
+ var updateArray = $(".sortable").sortable("toArray").join(",");
34
+ $.cookie("sortable", updateArray, {expires: 30});
35
+
36
+ });
37
+ if($.cookie("sortable")) {
38
+ var cookieValue = $.cookie("sortable").split(",").reverse();
39
+ $.each(
40
+ cookieValue,
41
+ function(index, value) {$('#'+value).prependTo(".sortable");}
42
+ );
43
+ }
44
+ });
45
+ })(jQuery);
46
+
47
+
48
+ /******************************
49
+ /* jquery.cookie.jsを使った機能
50
+ *******************************/
51
+
52
+ ////チェックの有無をcookie保存
53
+ (function($){
54
+ $(function(){
55
+
56
+ //supportのチェック項目を保存
57
+ if($.cookie("chk_support_selected_value")){
58
+ $.cookie("chk_support_selected_value").split(",").forEach(function(v){
59
+ $('input[name=chk_support][value='+v+']').prop('checked',true);
60
+ });
61
+ }
62
+ $('.save').on("click",function(){
63
+ var v=$('input[name=chk_support]:checked').map(function(){return $(this).val()}).get().join(",");
64
+ if(v===""){
65
+ $.removeCookie("chk_support_selected_value");
66
+ }else{
67
+ $.cookie("chk_support_selected_value",v);
68
+ }
69
+ });
70
+ //support(未指定の場合)のチェック項目を保存
71
+ if($.cookie("chk_support_un_selected_value")){
72
+ $.cookie("chk_support_un_selected_value").split(",").forEach(function(v){
73
+ $('input[name=chk_support_un][value='+v+']').prop('checked',true);
74
+ });
75
+ }
76
+ $('.save').on("click",function(){
77
+ var v=$('input[name=chk_support_un]:checked').map(function(){return $(this).val()}).get().join(",");
78
+ if(v===""){
79
+ $.removeCookie("chk_support_un_selected_value");
80
+ }else{
81
+ $.cookie("chk_support_un_selected_value",v);
82
+ }
83
+ });
84
+
85
+ //pointのチェック項目を保存
86
+ if($.cookie("chk_point_selected_value")){
87
+ $.cookie("chk_point_selected_value").split(",").forEach(function(v){
88
+ $('input[name=chk_point][value='+v+']').prop('checked',true);
89
+ });
90
+ }
91
+ $('.save').on("click",function(){
92
+ var v=$('input[name=chk_point]:checked').map(function(){return $(this).val()}).get().join(",");
93
+ if(v===""){
94
+ $.removeCookie("chk_point_selected_value");
95
+ }else{
96
+ $.cookie("chk_point_selected_value",v);
97
+ }
98
+ });
99
+
100
+ //volumeのチェック項目を保存
101
+ if($.cookie("chk_volume_selected_value")){
102
+ $.cookie("chk_volume_selected_value").split(",").forEach(function(v){
103
+ $('input[name=chk_volume][value='+v+']').prop('checked',true);
104
+ });
105
+ }
106
+ $('.fluits_save').on("click",function(){
107
+ var v=$('input[name=chk_volume]:checked').map(function(){return $(this).val()}).get().join(",");
108
+ if(v===""){
109
+ $.removeCookie("chk_volume_selected_value");
110
+ }else{
111
+ $.cookie("chk_volume_selected_value",v);
112
+ }
113
+ });
114
+
115
+ //fluitsのチェック項目を保存
116
+ if($.cookie("chk_fluits_selected_value")){
117
+ $.cookie("chk_fluits_selected_value").split(",").forEach(function(v){
118
+ $('input[name=chk_fluits][value='+v+']').prop('checked',true);
119
+ });
120
+ }
121
+ $('.save').on("click",function(){
122
+ var v=$('input[name=chk_fluits]:checked').map(function(){return $(this).val()}).get().join(",");
123
+ if(v===""){
124
+ $.removeCookie("chk_fluits_selected_value");
125
+ }else{
126
+ $.cookie("chk_fluits_selected_value",v);
127
+ }
128
+ });
129
+
130
+ });
131
+ })(jQuery);
132
+
133
+
134
+ /*******************************
135
+ /* 初回読み込み時の自動チェック機能
136
+ *******************************/
137
+
138
+ //保存クリック履歴ないときのチェック
139
+ (function($){
140
+ $(document).ready(function(){
141
+ if($.cookie("access") == undefined) {
142
+ //保存クリック履歴ないときのsupportチェック
143
+ $('#support1').prop("checked", true);
144
+ //保存クリック履歴ないときのpointチェック
145
+ $('#point1').prop("checked", true);
146
+ //保存クリック履歴ないときのvolumeチェック
147
+ $('#volume1').prop("checked", true);
148
+ $('#volume1_un').prop("checked", true);
149
+ //保存クリック履歴ないときのfluitsチェック
150
+ $('#apple, #banana, #grape').prop("checked", true);
151
+ }
152
+ });
153
+
154
+ //保存クリック履歴有無判別のためのcookie保存
155
+ $('body').on("click",'.save',function(){
156
+ $.cookie("access","hello", { expires: 365 , path: "/" });
157
+ });
158
+
159
+ })(jQuery);
160
+
161
+
162
+ /*******************************
163
+ /* 読み込み時の自動表示機能
164
+ *******************************/
165
+
166
+ (function($){
167
+ $(document).ready(function () {
168
+
169
+ //support表示切替
170
+ $('input[name="chk_support"]').each(function(){
171
+ if ($(this).prop("checked") == true) {
172
+ $( '.' + $(this).attr('id') ).css('display', 'table-cell');
173
+ } else {
174
+ $( '.' + $(this).attr('id') ).css('display', 'none');
175
+ }
176
+ });
177
+ $('input[name="chk_support_un"]').each(function(){
178
+ if ($(this).prop("checked") == true) {
179
+ $('.tablerow thead tr th, .tablerow tbody tr td').css('display', 'table-cell');
180
+ }
181
+ });
182
+
183
+ //point表示切替
184
+ $('input[name="chk_point"]').each(function(){
185
+ if ($(this).prop("checked") == true) {
186
+ $( '.' + $(this).attr('id') ).css('display', 'table-row');
187
+ } else {
188
+ $( '.' + $(this).attr('id') ).css('display', 'none');
189
+ }
190
+ });
191
+
192
+ //fluits表示切替
193
+ $('input[name="chk_fluits"]').each(function(){
194
+ if ($(this).prop("checked") == true) {
195
+ $( '.' + $(this).attr('id') ).css('display', 'table-row');
196
+ } else {
197
+ $( '.' + $(this).attr('id') ).css('display', 'none');
198
+ }
199
+ });
200
+
201
+ });
202
+ })(jQuery);
203
+
204
+ ```