回答編集履歴
2
個別チェック時の処理の解釈が誤っていたのを修正
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
擬似クラス `:checked` を使いますが、Selectors API 4 の `:has` がないと現行HTMLでは実現不可能なので構造を変えます。
|
|
2
2
|
(JavaScript 無効では「全てチェック／解除」が不要なコンテンツとして残るのでJavaScriptで「全てチェック／解除」を生成するようにしました。)
|
|
3
3
|
|
|
4
|
-
- [input[type=checkbox] を全てチェックする - JSFiddle](https://jsfiddle.net/kw3uaqv4/
|
|
4
|
+
- [input[type=checkbox] を全てチェックする - JSFiddle](https://jsfiddle.net/kw3uaqv4/3/)
|
|
5
5
|
|
|
6
6
|
```html
|
|
7
7
|
<style>
|
|
@@ -85,4 +85,8 @@
|
|
|
85
85
|
</form>
|
|
86
86
|
```
|
|
87
87
|
|
|
88
|
+
**(更新履歴)**
|
|
89
|
+
- 2016/03/16 17:11 changeイベントに変更。個別チェック時に一括チェックと連動するように修正。
|
|
90
|
+
- 2016/03/16 18:00 個別チェック時の処理の解釈が誤っていたのを修正
|
|
91
|
+
|
|
88
92
|
Re: ao_love さん
|
1
changeイベントに変更。個別チェック時に一括チェックと連動するように修正。
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
擬似クラス `:checked` を使いますが、Selectors API 4 の `:has` がないと現行HTMLでは実現不可能なので構造を変えます。
|
|
2
2
|
(JavaScript 無効では「全てチェック／解除」が不要なコンテンツとして残るのでJavaScriptで「全てチェック／解除」を生成するようにしました。)
|
|
3
3
|
|
|
4
|
-
- [input[type=checkbox] を全てチェックする - JSFiddle](https://jsfiddle.net/kw3uaqv4/
|
|
4
|
+
- [input[type=checkbox] を全てチェックする - JSFiddle](https://jsfiddle.net/kw3uaqv4/2/)
|
|
5
5
|
|
|
6
6
|
```html
|
|
7
7
|
<style>
|
|
@@ -20,17 +20,20 @@
|
|
|
20
20
|
<script>
|
|
21
21
|
'use strict';
|
|
22
22
|
document.addEventListener('DOMContentLoaded', function (event) {
|
|
23
|
-
function
|
|
23
|
+
function handleChange (event) {
|
|
24
24
|
var input = event.target,
|
|
25
|
-
checked = input.checked
|
|
25
|
+
checked = input.checked;
|
|
26
|
-
genre = input.form.elements['genre[]'];
|
|
27
26
|
|
|
28
|
-
if (input.
|
|
27
|
+
if (input.tagName !== 'INPUT') {
|
|
29
28
|
return;
|
|
30
29
|
}
|
|
31
30
|
|
|
31
|
+
if (input.id === 'allcheck') {
|
|
32
|
-
|
|
32
|
+
for (var i = 0, genre = input.form.elements['genre[]'], l = genre.length; i < l; ++i) {
|
|
33
|
-
|
|
33
|
+
genre[i].checked = checked;
|
|
34
|
+
}
|
|
35
|
+
} else if (input.name === 'genre[]') {
|
|
36
|
+
input.form.elements['allcheck'].checked = checked;
|
|
34
37
|
}
|
|
35
38
|
}
|
|
36
39
|
|
|
@@ -48,7 +51,7 @@
|
|
|
48
51
|
label.firstChild.data = '全てチェック／解除';
|
|
49
52
|
|
|
50
53
|
ul.insertBefore(li, ul.firstElementChild);
|
|
51
|
-
|
|
54
|
+
ul.addEventListener('change', handleChange, false);
|
|
52
55
|
}
|
|
53
56
|
|
|
54
57
|
main();
|