まず、命題はチェックボックスといっていますがラジオボタンですね
間違いはidを利用して複数箇所処理をしようとしていることです
複数のタグに同じidを振ることはできませんので
どうしてもということであればclassを利用して下さい
sample
一応サンプルつけておきます
javascript
1 window . onload = function ( ) {
2 entryChange ( ) ;
3 Array . prototype . map . call ( document . querySelectorAll ( "[name=entryPlan]" ) , function ( i ) {
4 i . addEventListener ( 'change' , function ( ) { entryChange ( ) } ) ;
5 } ) ;
6 }
7 function entryChange ( ) {
8 var ele = document . querySelectorAll ( "[name=entryPlan]:checked" ) ;
9 var v = ele . length > 0 ? ele [ 0 ] . value : null ;
10 Array . prototype . map . call ( document . querySelectorAll ( ".boxes" ) , function ( i ) {
11 i . classList . add ( 'hide' ) ;
12 if (
13 ( v == 'hoge1' && i . classList . contains ( 'box1' ) ) ||
14 ( v == 'hoge2' && i . classList . contains ( 'box2' ) ) ||
15 ( v == 'hoge3' && ( i . classList . contains ( 'box1' ) || i . classList . contains ( 'box2' ) ) )
16 ) {
17 i . classList . remove ( 'hide' ) ;
18 }
19 } ) ;
20 }
HTML
1 <div>切り替え</div>
2 <div>
3 <label><input type="radio" name="entryPlan" value="hoge1" checked>1だけ表示</label>
4 <label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
5 <label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
6 </div>
7 <table>
8 <thead>
9 <tr>
10 <th>番号</th>
11 <th>食べ物</th>
12 <th>飲み物</th>
13 </tr>
14 </thead>
15 <tbody>
16 <tr class="boxes box1">
17 <th>1</th>
18 <th>ぶどう</th>
19 <th>ワイン</th>
20 </tr>
21 <tr class="boxes box2">
22 <th>2</th>
23 <th>ホップ</th>
24 <th>ビール</th>
25 </tr>
26 <tr class="boxes box2">
27 <th>3</th>
28 <th>ケーキ</th>
29 <th>チョコ</th>
30 </tr>
31 </tbody>
32 </table>
33
追記
ラジオボタンとテーブルの組み合わせが複数ある場合は、formでグルーピングしてください
javascript
1 window . onload = function ( ) {
2 entryChange ( ) ;
3 Array . prototype . map . call ( document . querySelectorAll ( "[name=entryPlan]" ) , function ( i ) {
4 i . addEventListener ( 'change' , function ( ) { entryChange ( ) } ) ;
5 } ) ;
6 }
7 function entryChange ( ) {
8 var ele = document . querySelectorAll ( "[name=entryPlan]:checked" ) ;
9 for ( var i = 0 ; i < ele . length ; i ++ ) {
10 v = ele [ i ] . value ;
11 Array . prototype . map . call ( ele [ i ] . form . querySelectorAll ( ".boxes" ) , function ( j ) {
12 j . classList . add ( 'hide' ) ;
13 if (
14 ( v == 'hoge1' && j . classList . contains ( 'box1' ) ) ||
15 ( v == 'hoge2' && j . classList . contains ( 'box2' ) ) ||
16 ( v == 'hoge3' && ( j . classList . contains ( 'box1' ) || j . classList . contains ( 'box2' ) ) )
17 ) {
18 j . classList . remove ( 'hide' ) ;
19 }
20 } ) ;
21 }
22 }
HTML
1 <div>切り替え</div>
2 <form>
3 <div>
4 <label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label>
5 <label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
6 <label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
7 </div>
8 <table>
9 <thead>
10 <tr>
11 <th>番号</th>
12 <th>食べ物</th>
13 <th>飲み物</th>
14 </tr>
15 </thead>
16 <tbody>
17 <tr class="boxes box1">
18 <th>1</th>
19 <th>ぶどう</th>
20 <th>ワイン</th>
21 </tr>
22 <tr class="boxes box2">
23 <th>2</th>
24 <th>ホップ</th>
25 <th>ビール</th>
26 </tr>
27 <tr class="boxes box2">
28 <th>3</th>
29 <th>ケーキ</th>
30 <th>チョコ</th>
31 </tr>
32 </tbody>
33 </table>
34 </form>
35 <form>
36 <div>
37 <label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label>
38 <label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
39 <label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
40 </div>
41 <table>
42 <thead>
43 <tr>
44 <th>番号</th>
45 <th>食べ物</th>
46 <th>飲み物</th>
47 </tr>
48 </thead>
49 <tbody>
50 <tr class="boxes box1">
51 <th>1</th>
52 <th>ぶどう</th>
53 <th>ワイン</th>
54 </tr>
55 <tr class="boxes box2">
56 <th>2</th>
57 <th>ホップ</th>
58 <th>ビール</th>
59 </tr>
60 <tr class="boxes box2">
61 <th>3</th>
62 <th>ケーキ</th>
63 <th>チョコ</th>
64 </tr>
65 </tbody>
66 </table>
67 </form>
68 <form>
69 <div>
70 <label><input type="radio" name="entryPlan" value="hoge1">1だけ表示</label>
71 <label><input type="radio" name="entryPlan" value="hoge2">23表示</label>
72 <label><input type="radio" name="entryPlan" value="hoge3">123表示</label>
73 </div>
74 <table>
75 <thead>
76 <tr>
77 <th>番号</th>
78 <th>食べ物</th>
79 <th>飲み物</th>
80 </tr>
81 </thead>
82 <tbody>
83 <tr class="boxes box1">
84 <th>1</th>
85 <th>ぶどう</th>
86 <th>ワイン</th>
87 </tr>
88 <tr class="boxes box2">
89 <th>2</th>
90 <th>ホップ</th>
91 <th>ビール</th>
92 </tr>
93 <tr class="boxes box2">
94 <th>3</th>
95 <th>ケーキ</th>
96 <th>チョコ</th>
97 </tr>
98 </tbody>
99 </table>
100 </form>
101
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/20 05:14
退会済みユーザー
2017/07/20 05:16
退会済みユーザー
2017/07/20 06:41
退会済みユーザー
2017/07/21 09:41
2017/07/21 12:11
退会済みユーザー
2017/07/21 12:51
2017/07/21 13:05
退会済みユーザー
2017/07/21 13:09
退会済みユーザー
2017/07/21 13:18
退会済みユーザー
2017/07/22 08:12