質問編集履歴
2
タイトル
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
checkbox：リロードでは状態保持、トリガーで状態リセット
|
body
CHANGED
|
File without changes
|
1
内容
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,96 +1,109 @@
|
|
|
1
|
-
|
|
1
|
+
ブラウザのリロード時はcheckboxの状態を保持したいのですが、ボタンクリックで再度読み込ませた場合には状態をリセットしたいです。
|
|
2
2
|
|
|
3
|
-
検索はチェックボックスとプルダウンリストを使用し、それぞれ検索ボタンのclickイベントでrefleshを実行し製品一覧の部分のみを書き替えていますが、書き換えたphpファイル内でチェックボックスとプルダウンの持つ値の参照ができません。
|
|
4
3
|
|
|
5
|
-
phpファイルではこれらの値を元にDBを再検索したいのですが、値が見れない為できません。何か良い方法をご存じないでしょうか。
|
|
6
|
-
|
|
7
4
|
```HTML
|
|
8
|
-
|
|
5
|
+
<--! jsで再読み込みさせるトリガー -->
|
|
9
6
|
<select id="type1">
|
|
10
|
-
|
|
7
|
+
<option value="10">カテゴリ1</option>
|
|
11
|
-
|
|
8
|
+
<option value="11">カテゴリ2</option>
|
|
12
|
-
|
|
9
|
+
<option value="12">カテゴリ3</option>
|
|
10
|
+
<option value="13">カテゴリ4</option>
|
|
11
|
+
<option value="14">カテゴリ5</option>
|
|
13
12
|
</select>
|
|
14
|
-
<select id="type2">
|
|
15
|
-
<option value="0">a</option>
|
|
16
|
-
<option value="1">b</option>
|
|
17
|
-
・・・複数分中略
|
|
18
|
-
</select>
|
|
19
|
-
<input type="button" value="検索" class="
|
|
13
|
+
<input type="button" value="検索" class="select-button">
|
|
20
14
|
|
|
21
|
-
|
|
15
|
+
<--! 保持/リセットしたいチェックボックス -->
|
|
22
|
-
<
|
|
16
|
+
<div id="td1">
|
|
23
|
-
<
|
|
17
|
+
<div class="td1_reflesh">
|
|
18
|
+
<form>
|
|
19
|
+
<table>
|
|
24
|
-
|
|
20
|
+
<tr>
|
|
25
|
-
|
|
21
|
+
<td width="130">
|
|
26
|
-
|
|
22
|
+
<input type="checkbox" name="check[]" value="0" id="img_1" data-savekey="1" class="checkbox">
|
|
27
|
-
|
|
23
|
+
<label for="img_1"><img src="images/button/check_outdoor.png"></label>
|
|
28
|
-
|
|
24
|
+
</td>
|
|
29
|
-
|
|
25
|
+
<td width="130">
|
|
30
|
-
|
|
26
|
+
<input type="checkbox" name="check[]" value="1" id="img_2" data-savekey="2" class="checkbox">
|
|
31
|
-
|
|
27
|
+
<Label for="img_2"><img src="images/button/check_indoor.png"></Label>
|
|
32
|
-
|
|
28
|
+
</td>
|
|
33
|
-
|
|
29
|
+
<td>
|
|
34
|
-
|
|
30
|
+
<input type="button" value="絞り込み" class="submit">
|
|
31
|
+
</td>
|
|
35
|
-
|
|
32
|
+
</tr>
|
|
36
33
|
</table>
|
|
37
|
-
</form>
|
|
34
|
+
</form>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
38
37
|
|
|
39
|
-
書き換え部分
|
|
40
|
-
<div id="innner_inner">
|
|
41
|
-
<div class="innner_inner_inner">
|
|
42
|
-
<?php include('AxisCam_inner.php'); ?>
|
|
43
|
-
<script src="checkbox_click.js"></script> //実際はチェックボックスを動的に生成しているので、イベントはリフレッシュ時に読み込む必要が有りここに記述しています
|
|
44
|
-
<script src="pulldown_click.js"></script>
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
38
|
```
|
|
48
39
|
|
|
49
40
|
```JavaScript
|
|
41
|
+
<script>
|
|
50
|
-
|
|
42
|
+
// トリガーのクリックイベント
|
|
51
|
-
// クリックイベントはプルダウンの検索ボタンとチェックボックスの検索ボタンの二つ存在しますが、内容が同じなので一つのみ記述します。
|
|
52
|
-
$(
|
|
43
|
+
$('.select-button').click(function(e){
|
|
53
44
|
e.preventDefault();
|
|
54
|
-
|
|
45
|
+
var num1 = $('#type1').val();
|
|
55
|
-
//var num2 = $('#type2').val();
|
|
56
|
-
//var check = $('check');
|
|
57
|
-
_reflesh('Axis.php');
|
|
46
|
+
_reflesh('Axis.php?type1=' + num1 );
|
|
58
47
|
return false;
|
|
59
48
|
});
|
|
60
|
-
|
|
61
|
-
// 書き換え
|
|
62
|
-
function _reflesh (url) {
|
|
49
|
+
function _reflesh (url) {
|
|
63
|
-
|
|
50
|
+
var $content = $('#td1').html();
|
|
64
|
-
|
|
51
|
+
$.ajax({
|
|
65
|
-
|
|
52
|
+
'url': url,
|
|
66
|
-
|
|
53
|
+
'dataType': 'html',
|
|
67
|
-
|
|
54
|
+
'cache': false
|
|
68
|
-
|
|
55
|
+
})
|
|
69
|
-
|
|
56
|
+
.then(function(data) {
|
|
57
|
+
// td1 リフレッシュ
|
|
70
|
-
|
|
58
|
+
var $nextcontent = $(data).find('#td1');
|
|
71
|
-
|
|
59
|
+
var $childcontent = $nextcontent.children('.td1_reflesh');
|
|
72
|
-
|
|
60
|
+
$('#td1').html($childcontent); // 書き換え
|
|
73
|
-
$nextcontent.html() : '<p>内容がありません。</p>' );
|
|
74
|
-
|
|
61
|
+
window.history.pushState(null, null, url);
|
|
75
62
|
},function(xhr, txtstat) {
|
|
76
63
|
$content.html( '<p>エラーのため表示できません。</p>' );
|
|
77
64
|
})
|
|
78
65
|
}
|
|
79
|
-
});
|
|
80
|
-
```
|
|
81
|
-
```php
|
|
82
|
-
// 値を取得
|
|
83
|
-
$type1 = $_GET['type1']; // カテゴリ１を取得
|
|
84
|
-
$type2 = $_GET['type2']; // カテゴリ２選択項目を取得
|
|
85
|
-
$checked=array("","","","","","","","","","","","","","","","","","","","");
|
|
86
|
-
$chb = $_GET["check"]; // チェック状態を取得
|
|
87
|
-
$chbcnt = count($chb); // チェック状態配列個数取得
|
|
88
66
|
|
|
67
|
+
// ブラウザリロード時に保持したチェックボックスの値を読み込む
|
|
89
|
-
|
|
68
|
+
function save_restore1_checkbox(target_class) {
|
|
69
|
+
var cbstate;
|
|
70
|
+
window.addEventListener('load', function () {
|
|
71
|
+
cbstate = JSON.parse(localStorage['CBState'] || '{}');
|
|
72
|
+
|
|
73
|
+
for (var key in cbstate) {
|
|
74
|
+
var el_lst = document.querySelectorAll('input[data-savekey="' + key + '"].' + target_class);
|
|
75
|
+
set_checkbox_checked_all(el_lst, true);
|
|
76
|
+
}
|
|
77
|
+
var cb = document.getElementsByClassName(target_class);
|
|
78
|
+
|
|
79
|
+
for (var c = 0; c < cb.length; c++) {
|
|
80
|
+
cb[c].addEventListener('click', function (evt) {
|
|
81
|
+
var savekey = this.getAttribute('data-savekey');
|
|
82
|
+
if (this.checked) {
|
|
83
|
+
cbstate[savekey] = true;
|
|
84
|
+
}else if (cbstate[savekey]) {
|
|
85
|
+
delete cbstate[savekey];
|
|
86
|
+
}
|
|
87
|
+
localStorage['CBState'] = JSON.stringify(cbstate);
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
function set_checkbox_checked_all(el_lst, checked) {
|
|
93
|
+
for (var c = 0; c < el_lst.length; c++) {
|
|
94
|
+
var el = el_lst[c];
|
|
95
|
+
if (el) {
|
|
96
|
+
el.checked = checked;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
save_restore1_checkbox('checkbox');
|
|
102
|
+
</script>
|
|
90
103
|
```
|
|
91
104
|
### 試したこと
|
|
92
105
|
|
|
93
|
-
|
|
106
|
+
上記の処理ではボタンクリックで一見リセットされたように見えるのですが、ブラウザでリロードすると前の保存状態へ戻ってしまいます。
|
|
94
107
|
|
|
95
108
|
### 補足情報（FW/ツールのバージョンなど）
|
|
96
109
|
|