teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問【ｊｓ】チェックボックスで表示OR非表示が切り替わりません。。

編集履歴

回答編集履歴

2

追記

2017/07/21 12:11

投稿

yambejp
yambejp

スコア114843

test CHANGED
@@ -131,3 +131,265 @@
131
131
 
132
132
 
133
133
  ```
134
+
135
+
136
+
137
+ # 追記
138
+
139
+ ラジオボタンとテーブルの組み合わせが複数ある場合は、formでグルーピングしてください
140
+
141
+ ```javascript
142
+
143
+ window.onload = function(){
144
+
145
+ entryChange();
146
+
147
+ Array.prototype.map.call(document.querySelectorAll("[name=entryPlan]"),function(i){
148
+
149
+ i.addEventListener('change',function(){entryChange()});
150
+
151
+ });
152
+
153
+ }
154
+
155
+ function entryChange(){
156
+
157
+ var ele=document.querySelectorAll("[name=entryPlan]:checked");
158
+
159
+ for(var i=0;i<ele.length;i++){
160
+
161
+ v=ele[i].value;
162
+
163
+ Array.prototype.map.call(ele[i].form.querySelectorAll(".boxes"),function(j){
164
+
165
+ j.classList.add('hide');
166
+
167
+ if(
168
+
169
+ (v=='hoge1' && j.classList.contains('box1')) ||
170
+
171
+ (v=='hoge2' && j.classList.contains('box2')) ||
172
+
173
+ (v=='hoge3' && (j.classList.contains('box1') || j.classList.contains('box2')))
174
+
175
+ ){
176
+
177
+ j.classList.remove('hide');
178
+
179
+ }
180
+
181
+ });
182
+
183
+ }
184
+
185
+ }
186
+
187
+ ```
188
+
189
+
190
+
191
+ ```HTML
192
+
193
+ <div>切り替え</div>
194
+
195
+ <form>
196
+
197
+ <div>
198
+
199
+ <label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label>
200
+
201
+ <label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
202
+
203
+ <label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
204
+
205
+ </div>
206
+
207
+ <table>
208
+
209
+ <thead>
210
+
211
+ <tr>
212
+
213
+ <th>番号</th>
214
+
215
+ <th>食べ物</th>
216
+
217
+ <th>飲み物</th>
218
+
219
+ </tr>
220
+
221
+ </thead>
222
+
223
+ <tbody>
224
+
225
+ <tr class="boxes box1">
226
+
227
+ <th>1</th>
228
+
229
+ <th>ぶどう</th>
230
+
231
+ <th>ワイン</th>
232
+
233
+ </tr>
234
+
235
+ <tr class="boxes box2">
236
+
237
+ <th>2</th>
238
+
239
+ <th>ホップ</th>
240
+
241
+ <th>ビール</th>
242
+
243
+ </tr>
244
+
245
+ <tr class="boxes box2">
246
+
247
+ <th>3</th>
248
+
249
+ <th>ケーキ</th>
250
+
251
+ <th>チョコ</th>
252
+
253
+ </tr>
254
+
255
+ </tbody>
256
+
257
+ </table>
258
+
259
+ </form>
260
+
261
+ <form>
262
+
263
+ <div>
264
+
265
+ <label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label>
266
+
267
+ <label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
268
+
269
+ <label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
270
+
271
+ </div>
272
+
273
+ <table>
274
+
275
+ <thead>
276
+
277
+ <tr>
278
+
279
+ <th>番号</th>
280
+
281
+ <th>食べ物</th>
282
+
283
+ <th>飲み物</th>
284
+
285
+ </tr>
286
+
287
+ </thead>
288
+
289
+ <tbody>
290
+
291
+ <tr class="boxes box1">
292
+
293
+ <th>1</th>
294
+
295
+ <th>ぶどう</th>
296
+
297
+ <th>ワイン</th>
298
+
299
+ </tr>
300
+
301
+ <tr class="boxes box2">
302
+
303
+ <th>2</th>
304
+
305
+ <th>ホップ</th>
306
+
307
+ <th>ビール</th>
308
+
309
+ </tr>
310
+
311
+ <tr class="boxes box2">
312
+
313
+ <th>3</th>
314
+
315
+ <th>ケーキ</th>
316
+
317
+ <th>チョコ</th>
318
+
319
+ </tr>
320
+
321
+ </tbody>
322
+
323
+ </table>
324
+
325
+ </form>
326
+
327
+ <form>
328
+
329
+ <div>
330
+
331
+ <label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label>
332
+
333
+ <label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
334
+
335
+ <label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
336
+
337
+ </div>
338
+
339
+ <table>
340
+
341
+ <thead>
342
+
343
+ <tr>
344
+
345
+ <th>番号</th>
346
+
347
+ <th>食べ物</th>
348
+
349
+ <th>飲み物</th>
350
+
351
+ </tr>
352
+
353
+ </thead>
354
+
355
+ <tbody>
356
+
357
+ <tr class="boxes box1">
358
+
359
+ <th>1</th>
360
+
361
+ <th>ぶどう</th>
362
+
363
+ <th>ワイン</th>
364
+
365
+ </tr>
366
+
367
+ <tr class="boxes box2">
368
+
369
+ <th>2</th>
370
+
371
+ <th>ホップ</th>
372
+
373
+ <th>ビール</th>
374
+
375
+ </tr>
376
+
377
+ <tr class="boxes box2">
378
+
379
+ <th>3</th>
380
+
381
+ <th>ケーキ</th>
382
+
383
+ <th>チョコ</th>
384
+
385
+ </tr>
386
+
387
+ </tbody>
388
+
389
+ </table>
390
+
391
+ </form>
392
+
393
+
394
+
395
+ ```

1

sample

2017/07/21 12:11

投稿

yambejp
yambejp

スコア114843

test CHANGED
@@ -5,3 +5,129 @@
5
5
  複数のタグに同じidを振ることはできませんので
6
6
 
7
7
  どうしてもということであればclassを利用して下さい
8
+
9
+
10
+
11
+ # sample
12
+
13
+ 一応サンプルつけておきます
14
+
15
+ ```CSS
16
+
17
+ .hide{display:none;}
18
+
19
+ ```
20
+
21
+ ```javascript
22
+
23
+ window.onload = function(){
24
+
25
+ entryChange();
26
+
27
+ Array.prototype.map.call(document.querySelectorAll("[name=entryPlan]"),function(i){
28
+
29
+ i.addEventListener('change',function(){entryChange()});
30
+
31
+ });
32
+
33
+ }
34
+
35
+ function entryChange(){
36
+
37
+ var ele=document.querySelectorAll("[name=entryPlan]:checked");
38
+
39
+ var v=ele.length>0?ele[0].value:null;
40
+
41
+ Array.prototype.map.call(document.querySelectorAll(".boxes"),function(i){
42
+
43
+ i.classList.add('hide');
44
+
45
+ if(
46
+
47
+ (v=='hoge1' && i.classList.contains('box1')) ||
48
+
49
+ (v=='hoge2' && i.classList.contains('box2')) ||
50
+
51
+ (v=='hoge3' && (i.classList.contains('box1') || i.classList.contains('box2')))
52
+
53
+ ){
54
+
55
+ i.classList.remove('hide');
56
+
57
+ }
58
+
59
+ });
60
+
61
+ }
62
+
63
+ ```
64
+
65
+ ```HTML
66
+
67
+ <div>切り替え</div>
68
+
69
+ <div>
70
+
71
+ <label><input type="radio" name="entryPlan" value="hoge1" checked>1だけ表示</label>
72
+
73
+ <label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
74
+
75
+ <label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
76
+
77
+ </div>
78
+
79
+ <table>
80
+
81
+ <thead>
82
+
83
+ <tr>
84
+
85
+ <th>番号</th>
86
+
87
+ <th>食べ物</th>
88
+
89
+ <th>飲み物</th>
90
+
91
+ </tr>
92
+
93
+ </thead>
94
+
95
+ <tbody>
96
+
97
+ <tr class="boxes box1">
98
+
99
+ <th>1</th>
100
+
101
+ <th>ぶどう</th>
102
+
103
+ <th>ワイン</th>
104
+
105
+ </tr>
106
+
107
+ <tr class="boxes box2">
108
+
109
+ <th>2</th>
110
+
111
+ <th>ホップ</th>
112
+
113
+ <th>ビール</th>
114
+
115
+ </tr>
116
+
117
+ <tr class="boxes box2">
118
+
119
+ <th>3</th>
120
+
121
+ <th>ケーキ</th>
122
+
123
+ <th>チョコ</th>
124
+
125
+ </tr>
126
+
127
+ </tbody>
128
+
129
+ </table>
130
+
131
+
132
+
133
+ ```