回答編集履歴

1

sample

2017/02/09 09:00

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -3,3 +3,173 @@
3
3
  直接styleをいじることができません。
4
4
 
5
5
  てっとりばやくはforなどで回してそれぞれ個別に処理してください
6
+
7
+
8
+
9
+ # sample
10
+
11
+ 一応jQuery版をあげておきます
12
+
13
+ ラジオボタンの値をみて切り替えるようにしてあります。
14
+
15
+ テーブルは複数あってもかまいませんが、ラジオボタンの名前を共有すると
16
+
17
+ おかしくなるので少し変えてあります
18
+
19
+
20
+
21
+ ```javascript
22
+
23
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
24
+
25
+ <script>
26
+
27
+ $(function(){
28
+
29
+ $('[type=radio]').on('change',function(){
30
+
31
+ $(this).parents('table').first().find('.firstBox').toggle($(this).val()=="0");
32
+
33
+ });
34
+
35
+ });
36
+
37
+ </script>
38
+
39
+ <form>
40
+
41
+ <table border="1" cellspacing="0" cellpadding="5">
42
+
43
+ <tr style="background:#EFEFEF;">
44
+
45
+ <th>
46
+
47
+ <label><input type="radio" name="entryPlan1" value="0" checked="checked" />初期はすべて表示</label>
48
+
49
+ <label><input type="radio" name="entryPlan1" value="1" />EEEE</label>
50
+
51
+ </th>
52
+
53
+ </tr>
54
+
55
+ <tr class="firstBox">
56
+
57
+ <th style="background:#FFCCCC;">Eを選んだ時 消える</th>
58
+
59
+ </tr>
60
+
61
+ <tr>
62
+
63
+ <td style="background:#FFCCCC;">
64
+
65
+ &gt;Eを選んだ時 消える
66
+
67
+ </td>
68
+
69
+ </tr>
70
+
71
+ <tr class="secondBox">
72
+
73
+ <th style="background:#CCCCFF;">Eを選んだ時 表示のまま</th>
74
+
75
+ </tr>
76
+
77
+ <tr>
78
+
79
+ <td style="background:#CCCCFF;">
80
+
81
+ &gt;Eを選んだ時 表示のまま
82
+
83
+ </td>
84
+
85
+ </tr>
86
+
87
+ <tr class="firstBox">
88
+
89
+ <th style="background:#FFCCCC;">Eを選んだ時 消える</th>
90
+
91
+ </tr>
92
+
93
+ <tr>
94
+
95
+ <td style="background:#FFCCCC;">
96
+
97
+ &gt;Eを選んだ時 消える
98
+
99
+ </td>
100
+
101
+ </tr>
102
+
103
+ </table>
104
+
105
+ <table border="1" cellspacing="0" cellpadding="5">
106
+
107
+ <tr style="background:#EFEFEF;">
108
+
109
+ <th>
110
+
111
+ <label><input type="radio" name="entryPlan2" value="0" checked="checked" />初期はすべて表示</label>
112
+
113
+ <label><input type="radio" name="entryPlan2" value="1" />EEEE</label>
114
+
115
+ </th>
116
+
117
+ </tr>
118
+
119
+ <tr class="firstBox">
120
+
121
+ <th style="background:#FFCCCC;">Eを選んだ時 消える</th>
122
+
123
+ </tr>
124
+
125
+ <tr>
126
+
127
+ <td style="background:#FFCCCC;">
128
+
129
+ &gt;Eを選んだ時 消える
130
+
131
+ </td>
132
+
133
+ </tr>
134
+
135
+ <tr class="secondBox">
136
+
137
+ <th style="background:#CCCCFF;">Eを選んだ時 表示のまま</th>
138
+
139
+ </tr>
140
+
141
+ <tr>
142
+
143
+ <td style="background:#CCCCFF;">
144
+
145
+ &gt;Eを選んだ時 表示のまま
146
+
147
+ </td>
148
+
149
+ </tr>
150
+
151
+ <tr class="firstBox">
152
+
153
+ <th style="background:#FFCCCC;">Eを選んだ時 消える</th>
154
+
155
+ </tr>
156
+
157
+ <tr>
158
+
159
+ <td style="background:#FFCCCC;">
160
+
161
+ &gt;Eを選んだ時 消える
162
+
163
+ </td>
164
+
165
+ </tr>
166
+
167
+ </table>
168
+
169
+ </form>
170
+
171
+ ```
172
+
173
+
174
+
175
+