質問編集履歴
2
タイトル
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
checkbox：リロードでは状態保持、トリガーで状態リセット
|
test
CHANGED
|
File without changes
|
1
内容
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
|
-
|
|
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
|
-
|
|
13
|
+
<option value="10">カテゴリ1</option>
|
|
20
|
-
|
|
14
|
+
|
|
21
|
-
|
|
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="
|
|
25
|
+
<input type="button" value="検索" class="select-button">
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
41
|
-
|
|
29
|
+
<--! 保持/リセットしたいチェックボックス -->
|
|
42
|
-
|
|
30
|
+
|
|
43
|
-
<
|
|
31
|
+
<div id="td1">
|
|
44
|
-
|
|
32
|
+
|
|
45
|
-
<t
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
83
|
+
// トリガーのクリックイベント
|
|
100
|
-
|
|
101
|
-
|
|
84
|
+
|
|
102
|
-
|
|
103
|
-
$(
|
|
85
|
+
$('.select-button').click(function(e){
|
|
104
86
|
|
|
105
87
|
e.preventDefault();
|
|
106
88
|
|
|
107
|
-
|
|
89
|
+
var num1 = $('#type1').val();
|
|
108
|
-
|
|
109
|
-
|
|
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 = $('#
|
|
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('#
|
|
115
|
+
var $nextcontent = $(data).find('#td1');
|
|
140
|
-
|
|
116
|
+
|
|
141
|
-
var $childcontent = $nextcontent.children('.
|
|
117
|
+
var $childcontent = $nextcontent.children('.td1_reflesh');
|
|
142
|
-
|
|
118
|
+
|
|
143
|
-
$('#
|
|
119
|
+
$('#td1').html($childcontent); // 書き換え
|
|
144
|
-
|
|
145
|
-
|
|
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
|
-
|
|
211
|
+
上記の処理ではボタンクリックで一見リセットされたように見えるのですが、ブラウザでリロードすると前の保存状態へ戻ってしまいます。
|
|
186
212
|
|
|
187
213
|
|
|
188
214
|
|