回答編集履歴
2
「チェックされていない」チェックボックスをを判定の基準とするのは分かりにくいと判断。素直に「チェックされた」チェックボックスで判定するよう書き換え。また、不足していた説明を追加
test
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
```JavaScript
|
|
10
10
|
|
|
11
|
-
$('#checkbox01, #checkbox02')
|
|
11
|
+
var checkboxElems = $('#checkbox01, #checkbox02');
|
|
12
12
|
|
|
13
13
|
```
|
|
14
14
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
```JavaScript
|
|
22
22
|
|
|
23
|
-
$('#checkbox01,#checkbox02')
|
|
23
|
+
var checkboxElems = $('#checkbox01,#checkbox02');
|
|
24
24
|
|
|
25
25
|
```
|
|
26
26
|
|
|
@@ -42,9 +42,35 @@
|
|
|
42
42
|
|
|
43
43
|
これを回避するためには、`$('#checkbox01, #checkbox02')`で取得した要素群が全てチェックされているか判定しなくてはなりません。
|
|
44
44
|
|
|
45
|
-
判定するやり方として複数の方法が考えられますが、ここでは全てのチェックボックスのうち「チェックされ
|
|
45
|
+
判定するやり方として複数の方法が考えられますが、ここでは全てのチェックボックスのうち「チェックされた」ものを取得し、その数がチェックボックス全ての数と一致するかどうか判定することにします。
|
|
46
46
|
|
|
47
|
+
チェックされたチェックボックスの数が、（チェックの有無を問わない）全てのチェックボックスの数と同じであれば、全てチェックされたと判定できます。
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
47
|
-
`.filter()`のセレクタに、「チェックされ
|
|
51
|
+
`.filter()`のセレクタに、「チェックされた」条件となるセレクタを指定し、「チェックされた」要素を全て取得します。
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
```JavaScript
|
|
56
|
+
|
|
57
|
+
var checkedCheckboxElems = checkboxElems.filter(':checked');
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
そして、数が一致するか判定します。
|
|
64
|
+
|
|
65
|
+
要素の数は`length`プロパティから取得できます。
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
```JavaScript
|
|
70
|
+
|
|
71
|
+
checkedCheckboxElems.length === checkboxElems.length
|
|
72
|
+
|
|
73
|
+
```
|
|
48
74
|
|
|
49
75
|
|
|
50
76
|
|
|
@@ -68,6 +94,24 @@
|
|
|
68
94
|
|
|
69
95
|
|
|
70
96
|
|
|
97
|
+
```JavaScript
|
|
98
|
+
|
|
99
|
+
// クラスxxxの付いた要素群
|
|
100
|
+
|
|
101
|
+
var xxxClassElems = $('.xxx');
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
// 表示/非表示を切り替え
|
|
106
|
+
|
|
107
|
+
// 変数の値と表示の有無が逆なため、`!`演算子を使用
|
|
108
|
+
|
|
109
|
+
xxxClassElems.toggle(!isAllChecked);
|
|
110
|
+
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
71
115
|
参考：[【jQuery】要素の表示・非表示について (show, hide, toggle) - TASK NOTES](http://www.task-notes.com/entry/20150112/1420994026)
|
|
72
116
|
|
|
73
117
|
参考：[論理演算子 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators)
|
|
@@ -80,11 +124,11 @@
|
|
|
80
124
|
|
|
81
125
|
```JavaScript
|
|
82
126
|
|
|
83
|
-
/* チェックボックスの要素。複数の
|
|
127
|
+
/* チェックボックスの要素群。複数の条件は、カンマ(,)で区切ります */
|
|
84
128
|
|
|
85
129
|
var checkboxElems = $('#checkbox01, #checkbox02');
|
|
86
130
|
|
|
87
|
-
/* クラスxxxの付いた要素。予め取得し、変数に入れておくことで、パフォーマンスが向上します */
|
|
131
|
+
/* クラスxxxの付いた要素群。予め取得し、変数に入れておくことで、パフォーマンスが向上します */
|
|
88
132
|
|
|
89
133
|
var xxxClassElems = $('.xxx');
|
|
90
134
|
|
|
@@ -92,29 +136,33 @@
|
|
|
92
136
|
|
|
93
137
|
checkboxElems.change(function() {
|
|
94
138
|
|
|
95
|
-
/*
|
|
139
|
+
/*
|
|
96
140
|
|
|
141
|
+
* チェックボックスの要素群から、チェックされた要素を全て取得します
|
|
142
|
+
|
|
143
|
+
*/
|
|
144
|
+
|
|
97
|
-
var
|
|
145
|
+
var checkedCheckboxElems = checkboxElems.filter(':checked');
|
|
98
146
|
|
|
99
147
|
/*
|
|
100
148
|
|
|
101
|
-
* チェック
|
|
149
|
+
* チェックされたチェックボックスの数が、チェックボックスの数と一致するかどうか判定し、その結果を変数に格納します
|
|
102
150
|
|
|
103
|
-
* 一
|
|
151
|
+
* 数が一致 = 全てチェックされている
|
|
104
152
|
|
|
105
|
-
* 一
|
|
153
|
+
* 数が不一致 = どれかがチェックされていない
|
|
106
154
|
|
|
107
155
|
*/
|
|
108
156
|
|
|
109
|
-
var isAllChecked =
|
|
157
|
+
var isAllChecked = checkedCheckboxElems.length === checkboxElems.length;
|
|
110
158
|
|
|
111
159
|
|
|
112
160
|
|
|
113
161
|
/*
|
|
114
162
|
|
|
115
|
-
* 全てチェックされてい
|
|
163
|
+
* 全てチェックされていれば、クラスxxxの付いた要素を表示せず、
|
|
116
164
|
|
|
117
|
-
* 全てチェックされていれば表示しま
|
|
165
|
+
* 全てチェックされていなければ表示します。
|
|
118
166
|
|
|
119
167
|
*/
|
|
120
168
|
|
1
不足していた説明/参考サイトを追加
test
CHANGED
|
@@ -44,9 +44,37 @@
|
|
|
44
44
|
|
|
45
45
|
判定するやり方として複数の方法が考えられますが、ここでは全てのチェックボックスのうち「チェックされていない」ものを取得し、その数が0かどうか判定することにします。「チェックされていない」要素の数が0であれば、全てチェックされたと判定できます。
|
|
46
46
|
|
|
47
|
+
`.filter()`のセレクタに、「チェックされていない」条件となるセレクタを指定し、「チェックされていない」要素を全て取得します。
|
|
47
48
|
|
|
48
49
|
|
|
49
|
-
|
|
50
|
+
|
|
51
|
+
参考：[.filter() | jQuery 1.9 日本語リファレンス | js STUDIO](http://js.studio-kingdom.com/jquery/traversing/filter)
|
|
52
|
+
|
|
53
|
+
参考：[jQueryでチェックボックスのチェック状態を調べる方法 - 大人になったら肺呼吸](http://d.hatena.ne.jp/replication/20130613/1371137959)
|
|
54
|
+
|
|
55
|
+
参考：[jQueryのセレクタで指定したもの以外を選択する・させる方法 :not() | 9ineBB](http://9-bb.com/jquery%E3%81%AE%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%81%A7%E3%81%9D%E3%82%8C%E4%BB%A5%E5%A4%96%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-not/)
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
この判定結果を、`.toggle()`に渡して表示/非表示を切り替え得られるようにします。
|
|
60
|
+
|
|
61
|
+
ただし、`.toggle()`は引数の値が`true`の場合に表示し、`false`の場合に非表示にしてしまいます。
|
|
62
|
+
|
|
63
|
+
先ほどの判定では、全てチェックされた（非表示にしたい）場合に`true`、全てチェックされていない（表示したい）場合に`false`となってしまうため、`!`演算子を使って`true`と`false`を逆にする必要があります。
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
※ちなみに`true`/`false`とは、JavaScriptのBooleanという値の事を意味しています。
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
参考：[【jQuery】要素の表示・非表示について (show, hide, toggle) - TASK NOTES](http://www.task-notes.com/entry/20150112/1420994026)
|
|
72
|
+
|
|
73
|
+
参考：[論理演算子 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators)
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
以上の点を考慮した、適切に動作するコードが以下になります。
|
|
50
78
|
|
|
51
79
|
|
|
52
80
|
|