teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問checkbox：リロードでは状態保持、トリガーで状態リセット

編集履歴

質問編集履歴

2

タイトル

2021/06/12 04:51

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- refleshメゾットでphpへ値渡しをしたい
1
+ checkbox：リロードでは状態保持、トリガーで状態リセット
test CHANGED
File without changes

1

内容

2021/06/12 04:51

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,150 +1,124 @@
1
- HP上で製品をDB検索し、データを一覧表示させる部分を作っています。
2
-
3
-
4
-
5
- 検索はチェックボックスとプルダウンリストを使用し、それぞれ検索ボタンのclickイベントでrefleshを実行し製品一覧の部分のみを書き替えていますが、書き換えたphpファイル内でチェックボックスとプルダウンの持つ値の参照ができません。
6
-
7
-
8
-
9
- phpファイルではこれらの値を元にDBを再検索したいのですが、値が見れない為できません。何か良い方法をご存じないでしょうか。
1
+ ブラウザのリロード時はcheckboxの状態を保持したいのですが、ボタンクリックで再度読み込ませた場合には状態をリセットしたいです。
2
+
3
+
10
4
 
11
5
 
12
6
 
13
7
  ```HTML
14
8
 
15
- 検索部品プルダウン
9
+ <--! jsで再読み込みさせるトリガー -->
16
10
 
17
11
  <select id="type1">
18
12
 
19
- 　　<option value="0">1</option>
13
+ <option value="10">カテゴリ1</option>
20
-
14
+
21
- 　　<option value="1">2</option>
15
+ <option value="11">カテゴリ2</option>
22
-
16
+
23
- 　　・・・複数分中略
17
+ <option value="12">カテゴリ3</option>
18
+
19
+ <option value="13">カテゴリ4</option>
20
+
21
+ <option value="14">カテゴリ5</option>
24
22
 
25
23
  </select>
26
24
 
27
- <select id="type2">
28
-
29
- 　　<option value="0">a</option>
30
-
31
- 　　<option value="1">b</option>
32
-
33
- 　　・・・複数分中略
34
-
35
- </select>
36
-
37
- <input type="button" value="検索" class="camselect-button">
25
+ <input type="button" value="検索" class="select-button">
38
-
39
-
40
-
26
+
27
+
28
+
41
- 検索部品チェックボックス
29
+ <--! 保持/リセットしたいチェックボックス -->
42
-
30
+
43
- <form method="get" >
31
+ <div id="td1">
44
-
32
+
45
- 　　<table border="0">
33
+ 　　<div class="td1_reflesh">
34
+
46
-
35
+ 　　　<form>
36
+
37
+ 　　　<table>
38
+
47
- 　　<tr>
39
+ 　　　　<tr>
48
-
40
+
49
- 　　<td width="130">
41
+ 　　　　　<td width="130">
50
-
42
+
51
- 　　<input id="img_1" type="checkbox" value="0" name="check[]"' . $checked[0] . '/>
43
+ 　　　　　　<input type="checkbox" name="check[]" value="0" id="img_1" data-savekey="1" class="checkbox">
52
-
44
+
53
- 　　<label for="img_1"><img src="images/button/check_outdoor.png"></label>
45
+ 　　　　　　<label for="img_1"><img src="images/button/check_outdoor.png"></label>
54
-
46
+
55
- 　　</td>
47
+ 　　　　　</td>
56
-
48
+
57
- 　　<td width="130">
49
+ 　　　　　<td width="130">
58
-
50
+
59
- 　　<input id="img_2" type="checkbox" value="1" name="check[]"' . $checked[1] . '/>
51
+ 　　　　　　<input type="checkbox" name="check[]" value="1" id="img_2" data-savekey="2" class="checkbox">
60
-
52
+
61
- 　　<Label for="img_2"><img src="images/button/check_indoor.png"></Label>
53
+ 　　　　　　<Label for="img_2"><img src="images/button/check_indoor.png"></Label>
62
-
54
+
63
- 　　</td>
55
+ 　　　　　</td>
64
-
56
+
65
- 　　・・・複数分中略
57
+ 　　　　　<td>
66
-
58
+
67
- <input type="button" value="絞り込み" class="submit"></td>
59
+ 　　　　　　<input type="button" value="絞り込み" class="submit">
60
+
68
-
61
+ 　　　　　</td>
62
+
69
- 　　</tr>
63
+ 　　　</tr>
70
64
 
71
65
  　　</table>
72
66
 
73
- </form>
67
+ 　　</form>
74
-
75
-
76
-
77
- 書き換え部分
68
+
78
-
79
- <div id="innner_inner">
80
-
81
- 　　<div class="innner_inner_inner">
82
-
83
- 　　<?php include('AxisCam_inner.php'); ?>
84
-
85
- 　　<script src="checkbox_click.js"></script> //実際はチェックボックスを動的に生成しているので、イベントはリフレッシュ時に読み込む必要が有りここに記述しています
86
-
87
- 　　<script src="pulldown_click.js"></script>
88
-
89
- 　　</div>
69
+ 　</div>
90
70
 
91
71
  </div>
92
72
 
73
+
74
+
93
75
  ```
94
76
 
95
77
 
96
78
 
97
79
  ```JavaScript
98
80
 
81
+ <script>
82
+
99
- $(document).ready(function(){
83
+ // トリガーのクリックイベント
100
-
101
- // クリックイベントはプルダウンの検索ボタンとチェックボックスの検索ボタンの二つ存在しますが、内容が同じなので一つのみ記述します。
84
+
102
-
103
- $( '.submit' ).on('click', function(e){
85
+ $('.select-button').click(function(e){
104
86
 
105
87
  e.preventDefault();
106
88
 
107
- //var num1 = $('#type1').val();
89
+ var num1 = $('#type1').val();
108
-
109
- //var num2 = $('#type2').val();
90
+
110
-
111
- //var check = $('check');
112
-
113
- _reflesh('Axis.php');
91
+ _reflesh('Axis.php?type1=' + num1 );
114
92
 
115
93
  return false;
116
94
 
117
95
  });
118
96
 
119
-
120
-
121
- // 書き換え
122
-
123
- function _reflesh (url) {
97
+ function _reflesh (url) {
124
-
98
+
125
- var $content = $('#innner_inner').html( '<p>読み込み中</p>' );
99
+ var $content = $('#td1').html();
126
-
100
+
127
- $.ajax({
101
+ $.ajax({
128
-
102
+
129
- 'url': url,
103
+ 'url': url,
130
-
104
+
131
- 'dataType': 'html',
105
+ 'dataType': 'html',
132
-
106
+
133
- 'cache': false
107
+ 'cache': false
134
-
108
+
135
- })
109
+ })
136
-
110
+
137
- .then(function(data) {
111
+ .then(function(data) {
112
+
138
-
113
+ // td1 リフレッシュ
114
+
139
- var $nextcontent = $(data).find('#innner_inner');
115
+ var $nextcontent = $(data).find('#td1');
140
-
116
+
141
- var $childcontent = $nextcontent.children('.innner_inner_inner');
117
+ var $childcontent = $nextcontent.children('.td1_reflesh');
142
-
118
+
143
- $('#innner_inner').html($childcontent);
119
+ $('#td1').html($childcontent); // 書き換え
144
-
145
- $nextcontent.html() : '<p>内容がありません。</p>' );
120
+
146
-
147
- window.history.pushState(null, null, url);
121
+ window.history.pushState(null, null, url);
148
122
 
149
123
  },function(xhr, txtstat) {
150
124
 
@@ -154,35 +128,87 @@
154
128
 
155
129
  }
156
130
 
131
+
132
+
133
+ // ブラウザリロード時に保持したチェックボックスの値を読み込む
134
+
135
+ function save_restore1_checkbox(target_class) {
136
+
137
+ var cbstate;
138
+
139
+ window.addEventListener('load', function () {
140
+
141
+ cbstate = JSON.parse(localStorage['CBState'] || '{}');
142
+
143
+
144
+
145
+ for (var key in cbstate) {
146
+
147
+ var el_lst = document.querySelectorAll('input[data-savekey="' + key + '"].' + target_class);
148
+
149
+ set_checkbox_checked_all(el_lst, true);
150
+
151
+ }
152
+
153
+ var cb = document.getElementsByClassName(target_class);
154
+
155
+
156
+
157
+ for (var c = 0; c < cb.length; c++) {
158
+
159
+ cb[c].addEventListener('click', function (evt) {
160
+
161
+ var savekey = this.getAttribute('data-savekey');
162
+
163
+ if (this.checked) {
164
+
165
+ cbstate[savekey] = true;
166
+
167
+ }else if (cbstate[savekey]) {
168
+
169
+ delete cbstate[savekey];
170
+
171
+ }
172
+
173
+ localStorage['CBState'] = JSON.stringify(cbstate);
174
+
157
- });
175
+ });
176
+
177
+ }
178
+
179
+ });
180
+
181
+
182
+
183
+ function set_checkbox_checked_all(el_lst, checked) {
184
+
185
+ for (var c = 0; c < el_lst.length; c++) {
186
+
187
+ var el = el_lst[c];
188
+
189
+ if (el) {
190
+
191
+ el.checked = checked;
192
+
193
+ }
194
+
195
+ }
196
+
197
+ }
198
+
199
+ }
200
+
201
+ save_restore1_checkbox('checkbox');
202
+
203
+ </script>
158
204
 
159
205
  ```
160
206
 
161
- ```php
162
-
163
- // 値を取得
164
-
165
- $type1 = $_GET['type1']; // カテゴリ１を取得
166
-
167
- $type2 = $_GET['type2']; // カテゴリ２選択項目を取得
168
-
169
- $checked=array("","","","","","","","","","","","","","","","","","","","");
170
-
171
- $chb = $_GET["check"]; // チェック状態を取得
172
-
173
- $chbcnt = count($chb); // チェック状態配列個数取得
174
-
175
-
176
-
177
- カテゴリ１、２、チェックボックスのvalueをもとに以後の処理でMySQL検索し、表示しています。
178
-
179
- ```
180
-
181
207
  ### 試したこと
182
208
 
183
209
 
184
210
 
185
- clickイベント内で値を取得し、それを_refreshの引数であるurlにベタ書きすればphp側でも拾えたのですが、取得したい値が複数あり、なおかつチェックボックスの配列だったりするので、できればベタ書きでは無くもっとスマートにしたいです。
211
+ 上記の処理ではボタンクリックで一見リセットされたように見えるのですが、ブラウザでリロードすると前の保存状態へ戻ってしまいます。
186
212
 
187
213
 
188
214