回答編集履歴

7

追記

2018/08/29 16:53

投稿

liveasnotes
liveasnotes

スコア1284

test CHANGED
@@ -72,14 +72,18 @@
72
72
 
73
73
 
74
74
 
75
+ ---
76
+
77
+
78
+
79
+ #追記(20180830)
80
+
81
+
82
+
75
- 修正版
83
+ - 表組み修正版
76
84
 
77
85
  ```html
78
86
 
79
- <!--整えたバージョン-->
80
-
81
-
82
-
83
87
  <form class="form-control" action="./score" method="post">
84
88
 
85
89
  <table class="layout-set" border="0" cellspacing="0" cellpadding="0">
@@ -110,11 +114,11 @@
110
114
 
111
115
  </tr>
112
116
 
113
- <!-- 表示非表示切り替え -->
117
+ </table>
114
-
118
+
115
- <tr id="firstBox">
119
+ <table id="entry_as_user">
116
-
120
+
117
- <!--<tr> ←削除分-->
121
+ <tr>
118
122
 
119
123
  <th>ユーザー名:</th>
120
124
 
@@ -146,15 +150,19 @@
146
150
 
147
151
  </td>
148
152
 
149
- <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
150
-
151
- </tr>
153
+ </tr>
154
+
152
-
155
+ <tr>
156
+
157
+ <td><button type="submit">SUBMIT_A</button></td>
158
+
159
+ </tr>
160
+
153
- <!-- 表示非表示切り替え -->
161
+ </table>
154
-
162
+
155
- <tr id="secondBox">
163
+ <table id="entry_as_team">
156
-
164
+
157
- <!--<tr> ←削除分-->
165
+ <tr>
158
166
 
159
167
  <th>チーム名:</th>
160
168
 
@@ -186,11 +194,13 @@
186
194
 
187
195
  </td>
188
196
 
189
- <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
190
-
191
- </tr>
197
+ </tr>
198
+
192
-
199
+ <tr>
200
+
193
-
201
+ <td><button type="submit">SUBMIT_B</button></td>
202
+
203
+ </tr>
194
204
 
195
205
  </table>
196
206
 
@@ -204,15 +214,21 @@
204
214
 
205
215
  function entryChange1(){
206
216
 
217
+ var eau = document.getElementById('entry_as_user');
218
+
219
+ var eat = document.getElementById('entry_as_team');
220
+
221
+
222
+
207
223
  radio = document.getElementsByName('entryPlan')
208
224
 
209
225
  if(radio[0].checked) {
210
226
 
211
227
  //フォーム
212
228
 
213
- document.getElementById('firstBox').style.display = "";
229
+ eau.style.display = "";
214
-
230
+
215
- document.getElementById('secondBox').style.display = "none";
231
+ eat.style.display = "none";
216
232
 
217
233
  //特典
218
234
 
@@ -222,9 +238,9 @@
222
238
 
223
239
  //フォーム
224
240
 
225
- document.getElementById('firstBox').style.display = "none";
241
+ eau.style.display = "none";
226
-
242
+
227
- document.getElementById('secondBox').style.display = "";
243
+ eat.style.display = "";
228
244
 
229
245
  //特典
230
246
 
@@ -246,129 +262,91 @@
246
262
 
247
263
 
248
264
 
249
- # 追記(20180829)
250
-
251
- これでどうでしょう.
265
+ - div版+css
252
-
253
- 単順に,いじりたい要素にidを振り分けて操作しているだけですが
266
+
254
-
255
- ![イメージ説明](4ff916dad21f42c3c85b149ead61b516.gif)
267
+ ![イメージ説明](be657f6dbd6f79c99c740d2429493d27.gif)
256
-
257
-
258
268
 
259
269
  ```html
260
270
 
261
271
  <form class="form-control" action="./score" method="post">
262
272
 
263
- <table class="layout-set" border="0" cellspacing="0" cellpadding="0">
264
-
265
- <tr>
266
-
267
- <th>登録種別</th>
268
-
269
- <td>
270
-
271
- <label>
272
-
273
- <input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />
274
-
275
- ユーザー
276
-
277
- </label>
278
-
279
- <label>
280
-
281
- <input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />
282
-
283
- チーム
284
-
285
- </label>
286
-
287
- </td>
288
-
289
- </tr>
290
-
291
- <tr id="entry_input_user">
292
-
293
- <th>ユーザー名:</th>
294
-
295
- <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
296
-
297
- </tr>
298
-
299
- <tr id="entry_select_team">
300
-
301
- <th>チーム名:</th>
302
-
303
- <td>
304
-
305
- <select class="custom-select">
306
-
307
- <option selected>チーム選択</option>
308
-
309
- <option value="1">A-team</option>
310
-
311
- <option value="2">B-team</option>
312
-
313
- <option value="3">C-team</option>
314
-
315
- <option value="4">D-team</option>
316
-
317
- <option value="5">E-team</option>
318
-
319
- </select>
320
-
321
- </td>
322
-
323
- </tr>
324
-
325
- <tr>
326
-
327
- <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
328
-
329
- </tr>
330
-
331
- <tr id="entry_input_team">
332
-
333
- <th>チーム名:</th>
334
-
335
- <td><input type="text" class="form-control" placeholder="チーム名"/></td>
336
-
337
- </tr>
338
-
339
- <tr id="entry_select_user">
340
-
341
- <th>ユーザー名:</th>
342
-
343
- <td>
344
-
345
- <select class="custom-select">
346
-
347
- <option selected>ユーザー選択</option>
348
-
349
- <option value="1">User-A</option>
350
-
351
- <option value="2">User-B</option>
352
-
353
- <option value="3">User-C</option>
354
-
355
- <option value="4">User-D</option>
356
-
357
- <option value="5">User-E</option>
358
-
359
- </select>
360
-
361
- </td>
362
-
363
- </tr>
364
-
365
- <tr>
366
-
367
- <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
368
-
369
- </tr>
370
-
371
- </table>
273
+ <div>
274
+
275
+ <span>登録種別</span>
276
+
277
+ <label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />ユーザー</label>
278
+
279
+ <label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />チーム</label>
280
+
281
+ </div>
282
+
283
+
284
+
285
+ <div id="entry_as_user" class="form_contents">
286
+
287
+ <label>ユーザ名:
288
+
289
+ <input type="text" class="form-control" placeholder="ユーザー名"/>
290
+
291
+ </label>
292
+
293
+ <label>チーム名:
294
+
295
+ <select class="custom-select">
296
+
297
+ <option selected>チーム選択</option>
298
+
299
+ <option value="1">A-team</option>
300
+
301
+ <option value="2">B-team</option>
302
+
303
+ <option value="3">C-team</option>
304
+
305
+ <option value="4">D-team</option>
306
+
307
+ <option value="5">E-team</option>
308
+
309
+ </select>
310
+
311
+ </label>
312
+
313
+ <button type="submit">SUBMIT_A</button>
314
+
315
+ </div>
316
+
317
+
318
+
319
+ <div id="entry_as_team" class="form_contents">
320
+
321
+ <label>チーム名:
322
+
323
+ <input type="text" class="form-control" placeholder="チーム名"/>
324
+
325
+ </label>
326
+
327
+ <label>ユーザ名:
328
+
329
+ <select class="custom-select">
330
+
331
+ <option selected>ユーザー選択</option>
332
+
333
+ <option value="1">User-A</option>
334
+
335
+ <option value="2">User-B</option>
336
+
337
+ <option value="3">User-C</option>
338
+
339
+ <option value="4">User-D</option>
340
+
341
+ <option value="5">User-E</option>
342
+
343
+ </select>
344
+
345
+ </label>
346
+
347
+ <button type="submit">SUBMIT_B</button>
348
+
349
+ </div>
372
350
 
373
351
  </form>
374
352
 
@@ -380,15 +358,11 @@
380
358
 
381
359
  function entryChange1(){
382
360
 
383
- var iu = document.getElementById('entry_input_user');
361
+ var eau = document.getElementById('entry_as_user');
384
-
385
- var st = document.getElementById('entry_select_team');
362
+
386
-
387
- var it = document.getElementById('entry_input_team');
363
+ var eat = document.getElementById('entry_as_team');
388
-
389
- var su = document.getElementById('entry_select_user');
364
+
390
-
391
-
365
+
392
366
 
393
367
  radio = document.getElementsByName('entryPlan')
394
368
 
@@ -396,13 +370,9 @@
396
370
 
397
371
  //フォーム
398
372
 
399
- iu.style.display = "";
373
+ eau.style.display = "";
400
-
401
- st.style.display = "";
374
+
402
-
403
- it.style.display = "none";
375
+ eat.style.display = "none";
404
-
405
- su.style.display = "none";
406
376
 
407
377
  //特典
408
378
 
@@ -412,13 +382,9 @@
412
382
 
413
383
  //フォーム
414
384
 
415
- iu.style.display = "none";
385
+ eau.style.display = "none";
416
-
417
- st.style.display = "none";
386
+
418
-
419
- it.style.display = "";
387
+ eat.style.display = "";
420
-
421
- su.style.display = "";
422
388
 
423
389
  //特典
424
390
 
@@ -437,3 +403,13 @@
437
403
  </script>
438
404
 
439
405
  ```
406
+
407
+ ```css
408
+
409
+ .form_contents >label{
410
+
411
+ display: block;
412
+
413
+ }
414
+
415
+ ```

6

追記

2018/08/29 16:53

投稿

liveasnotes
liveasnotes

スコア1284

test CHANGED
@@ -243,3 +243,197 @@
243
243
  </script>
244
244
 
245
245
  ```
246
+
247
+
248
+
249
+ # 追記(20180829)
250
+
251
+ これでどうでしょう.
252
+
253
+ 単順に,いじりたい要素にidを振り分けて操作しているだけですが
254
+
255
+ ![イメージ説明](4ff916dad21f42c3c85b149ead61b516.gif)
256
+
257
+
258
+
259
+ ```html
260
+
261
+ <form class="form-control" action="./score" method="post">
262
+
263
+ <table class="layout-set" border="0" cellspacing="0" cellpadding="0">
264
+
265
+ <tr>
266
+
267
+ <th>登録種別</th>
268
+
269
+ <td>
270
+
271
+ <label>
272
+
273
+ <input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />
274
+
275
+ ユーザー
276
+
277
+ </label>
278
+
279
+ <label>
280
+
281
+ <input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />
282
+
283
+ チーム
284
+
285
+ </label>
286
+
287
+ </td>
288
+
289
+ </tr>
290
+
291
+ <tr id="entry_input_user">
292
+
293
+ <th>ユーザー名:</th>
294
+
295
+ <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
296
+
297
+ </tr>
298
+
299
+ <tr id="entry_select_team">
300
+
301
+ <th>チーム名:</th>
302
+
303
+ <td>
304
+
305
+ <select class="custom-select">
306
+
307
+ <option selected>チーム選択</option>
308
+
309
+ <option value="1">A-team</option>
310
+
311
+ <option value="2">B-team</option>
312
+
313
+ <option value="3">C-team</option>
314
+
315
+ <option value="4">D-team</option>
316
+
317
+ <option value="5">E-team</option>
318
+
319
+ </select>
320
+
321
+ </td>
322
+
323
+ </tr>
324
+
325
+ <tr>
326
+
327
+ <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
328
+
329
+ </tr>
330
+
331
+ <tr id="entry_input_team">
332
+
333
+ <th>チーム名:</th>
334
+
335
+ <td><input type="text" class="form-control" placeholder="チーム名"/></td>
336
+
337
+ </tr>
338
+
339
+ <tr id="entry_select_user">
340
+
341
+ <th>ユーザー名:</th>
342
+
343
+ <td>
344
+
345
+ <select class="custom-select">
346
+
347
+ <option selected>ユーザー選択</option>
348
+
349
+ <option value="1">User-A</option>
350
+
351
+ <option value="2">User-B</option>
352
+
353
+ <option value="3">User-C</option>
354
+
355
+ <option value="4">User-D</option>
356
+
357
+ <option value="5">User-E</option>
358
+
359
+ </select>
360
+
361
+ </td>
362
+
363
+ </tr>
364
+
365
+ <tr>
366
+
367
+ <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
368
+
369
+ </tr>
370
+
371
+ </table>
372
+
373
+ </form>
374
+
375
+
376
+
377
+ <!--スクリプト-->
378
+
379
+ <script type="text/javascript">
380
+
381
+ function entryChange1(){
382
+
383
+ var iu = document.getElementById('entry_input_user');
384
+
385
+ var st = document.getElementById('entry_select_team');
386
+
387
+ var it = document.getElementById('entry_input_team');
388
+
389
+ var su = document.getElementById('entry_select_user');
390
+
391
+
392
+
393
+ radio = document.getElementsByName('entryPlan')
394
+
395
+ if(radio[0].checked) {
396
+
397
+ //フォーム
398
+
399
+ iu.style.display = "";
400
+
401
+ st.style.display = "";
402
+
403
+ it.style.display = "none";
404
+
405
+ su.style.display = "none";
406
+
407
+ //特典
408
+
409
+ //document.getElementById('firstNotice').style.display = "";
410
+
411
+ }else if(radio[1].checked) {
412
+
413
+ //フォーム
414
+
415
+ iu.style.display = "none";
416
+
417
+ st.style.display = "none";
418
+
419
+ it.style.display = "";
420
+
421
+ su.style.display = "";
422
+
423
+ //特典
424
+
425
+ //document.getElementById('firstNotice').style.display = "none";
426
+
427
+ }
428
+
429
+ }
430
+
431
+
432
+
433
+ //オンロードさせ、リロード時に選択を保持
434
+
435
+ window.onload = entryChange1;
436
+
437
+ </script>
438
+
439
+ ```

5

修正

2018/08/29 04:34

投稿

liveasnotes
liveasnotes

スコア1284

test CHANGED
@@ -62,17 +62,21 @@
62
62
 
63
63
  ---
64
64
 
65
- idを振るべきタグは下のタグのようです(これも,インデントを整えておけばすぐ分かる)
65
+ ~~idを振るべきタグは下のタグのようです(これも,インデントを整えておけばすぐ分かる)~~
66
+
67
+ うっかりしていました(汗)
68
+
69
+ liveweaveのリントがはくエラーを消そうとしてこう書きましたが,x_xさんのご指摘の通り,tr要素の直下にtr要素は書けないです.つまり,下のgifのようにやるのは間違いになります
66
70
 
67
71
  ![イメージ説明](5566c19d4efcae70aafa54dbf0128271.gif)
68
72
 
73
+
74
+
75
+ 修正版:
76
+
69
77
  ```html
70
78
 
71
- <!--インデント整えたバージョン-->
79
+ <!--整えたバージョン-->
72
-
73
-
74
-
75
- <!--インデント整えたバージョン-->
76
80
 
77
81
 
78
82
 

4

修正

2018/08/29 03:31

投稿

liveasnotes
liveasnotes

スコア1284

test CHANGED
@@ -72,91 +72,123 @@
72
72
 
73
73
 
74
74
 
75
+ <!--インデント整えたバージョン-->
76
+
77
+
78
+
75
79
  <form class="form-control" action="./score" method="post">
76
80
 
77
- <table class="layout-set" border="0" cellspacing="0" cellpadding="0">
78
-
79
- <tr>
80
-
81
- <th>登録種別</th>
82
-
83
- <td>
84
-
85
- <label>
86
-
87
- <input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />
88
-
89
- ユーザー
90
-
91
- </label>
92
-
93
- <label>
94
-
95
- <input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />
96
-
97
- チーム
98
-
99
- </label>
100
-
101
- </td>
102
-
103
- </tr>
104
-
105
- <!-- 表示非表示切り替え -->
106
-
107
- <tr><!-- ←追加分-->
108
-
109
- <tr id="firstBox">
110
-
111
- <!--<tr> ←削除分-->
112
-
113
- <th>ユーザー名</th>
114
-
115
- <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
116
-
117
- </tr>
118
-
119
- <tr>
120
-
121
- <th>チーム名:</th>
122
-
123
- <td>
124
-
125
- <select class="custom-select">
126
-
127
- <option selected>チーム選択</option>
128
-
129
- <option value="1">A-team</option>
130
-
131
- <option value="2">B-team</option>
132
-
133
- <option value="3">C-team</option>
134
-
135
- <option value="4">D-team</option>
136
-
137
- <option value="5">E-team</option>
138
-
139
- </select>
140
-
141
- </td>
142
-
143
- <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
144
-
145
- </tr>
146
-
147
- </tr>
148
-
149
- <!-- 表示非表示切り替え -->
150
-
151
- <tr id="secondBox">
152
-
153
- <th>チーム名</th>
154
-
155
- <td><input type="text" class="form-control" placeholder="チーム名"/></td>
156
-
157
- </tr>
158
-
159
- </table>
81
+ <table class="layout-set" border="0" cellspacing="0" cellpadding="0">
82
+
83
+ <tr>
84
+
85
+ <th>登録種別</th>
86
+
87
+ <td>
88
+
89
+ <label>
90
+
91
+ <input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />
92
+
93
+ ユーザー
94
+
95
+ </label>
96
+
97
+ <label>
98
+
99
+ <input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />
100
+
101
+ チーム
102
+
103
+ </label>
104
+
105
+ </td>
106
+
107
+ </tr>
108
+
109
+ <!-- 表示非表示切り替え -->
110
+
111
+ <tr id="firstBox">
112
+
113
+ <!--<tr> ←削除分-->
114
+
115
+ <th>ユーザー名:</th>
116
+
117
+ <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
118
+
119
+ </tr>
120
+
121
+ <tr>
122
+
123
+ <th>チーム名:</th>
124
+
125
+ <td>
126
+
127
+ <select class="custom-select">
128
+
129
+ <option selected>チーム選択</option>
130
+
131
+ <option value="1">A-team</option>
132
+
133
+ <option value="2">B-team</option>
134
+
135
+ <option value="3">C-team</option>
136
+
137
+ <option value="4">D-team</option>
138
+
139
+ <option value="5">E-team</option>
140
+
141
+ </select>
142
+
143
+ </td>
144
+
145
+ <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
146
+
147
+ </tr>
148
+
149
+ <!-- 表示非表示切り替え -->
150
+
151
+ <tr id="secondBox">
152
+
153
+ <!--<tr> ←削除分-->
154
+
155
+ <th>チーム名:</th>
156
+
157
+ <td><input type="text" class="form-control" placeholder="チーム名"/></td>
158
+
159
+ </tr>
160
+
161
+ <tr>
162
+
163
+ <th>ユーザー名:</th>
164
+
165
+ <td>
166
+
167
+ <select class="custom-select">
168
+
169
+ <option selected>ユーザー選択</option>
170
+
171
+ <option value="1">User-A</option>
172
+
173
+ <option value="2">User-B</option>
174
+
175
+ <option value="3">User-C</option>
176
+
177
+ <option value="4">User-D</option>
178
+
179
+ <option value="5">User-E</option>
180
+
181
+ </select>
182
+
183
+ </td>
184
+
185
+ <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
186
+
187
+ </tr>
188
+
189
+
190
+
191
+ </table>
160
192
 
161
193
  </form>
162
194
 
@@ -166,43 +198,43 @@
166
198
 
167
199
  <script type="text/javascript">
168
200
 
169
- function entryChange1(){
201
+ function entryChange1(){
170
-
202
+
171
- radio = document.getElementsByName('entryPlan')
203
+ radio = document.getElementsByName('entryPlan')
172
-
204
+
173
- if(radio[0].checked) {
205
+ if(radio[0].checked) {
174
-
206
+
175
- //フォーム
207
+ //フォーム
176
-
208
+
177
- document.getElementById('firstBox').style.display = "";
209
+ document.getElementById('firstBox').style.display = "";
178
-
210
+
179
- document.getElementById('secondBox').style.display = "none";
211
+ document.getElementById('secondBox').style.display = "none";
180
-
212
+
181
- //特典
213
+ //特典
182
-
214
+
183
- //document.getElementById('firstNotice').style.display = "";
215
+ //document.getElementById('firstNotice').style.display = "";
184
-
216
+
185
- }else if(radio[1].checked) {
217
+ }else if(radio[1].checked) {
186
-
218
+
187
- //フォーム
219
+ //フォーム
188
-
220
+
189
- document.getElementById('firstBox').style.display = "none";
221
+ document.getElementById('firstBox').style.display = "none";
190
-
222
+
191
- document.getElementById('secondBox').style.display = "";
223
+ document.getElementById('secondBox').style.display = "";
192
-
224
+
193
- //特典
225
+ //特典
194
-
226
+
195
- //document.getElementById('firstNotice').style.display = "none";
227
+ //document.getElementById('firstNotice').style.display = "none";
196
-
197
- }
198
228
 
199
229
  }
200
230
 
201
-
231
+ }
202
-
232
+
233
+
234
+
203
- //オンロードさせ、リロード時に選択を保持
235
+ //オンロードさせ、リロード時に選択を保持
204
-
236
+
205
- window.onload = entryChange1;
237
+ window.onload = entryChange1;
206
238
 
207
239
  </script>
208
240
 

3

追記

2018/08/29 03:26

投稿

liveasnotes
liveasnotes

スコア1284

test CHANGED
@@ -65,3 +65,145 @@
65
65
  idを振るべきタグは下のタグのようです(これも,インデントを整えておけばすぐ分かる)
66
66
 
67
67
  ![イメージ説明](5566c19d4efcae70aafa54dbf0128271.gif)
68
+
69
+ ```html
70
+
71
+ <!--インデント整えたバージョン-->
72
+
73
+
74
+
75
+ <form class="form-control" action="./score" method="post">
76
+
77
+ <table class="layout-set" border="0" cellspacing="0" cellpadding="0">
78
+
79
+ <tr>
80
+
81
+ <th>登録種別</th>
82
+
83
+ <td>
84
+
85
+ <label>
86
+
87
+ <input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />
88
+
89
+ ユーザー
90
+
91
+ </label>
92
+
93
+ <label>
94
+
95
+ <input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />
96
+
97
+ チーム
98
+
99
+ </label>
100
+
101
+ </td>
102
+
103
+ </tr>
104
+
105
+ <!-- 表示非表示切り替え -->
106
+
107
+ <tr><!-- ←追加分-->
108
+
109
+ <tr id="firstBox">
110
+
111
+ <!--<tr> ←削除分-->
112
+
113
+ <th>ユーザー名:</th>
114
+
115
+ <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
116
+
117
+ </tr>
118
+
119
+ <tr>
120
+
121
+ <th>チーム名:</th>
122
+
123
+ <td>
124
+
125
+ <select class="custom-select">
126
+
127
+ <option selected>チーム選択</option>
128
+
129
+ <option value="1">A-team</option>
130
+
131
+ <option value="2">B-team</option>
132
+
133
+ <option value="3">C-team</option>
134
+
135
+ <option value="4">D-team</option>
136
+
137
+ <option value="5">E-team</option>
138
+
139
+ </select>
140
+
141
+ </td>
142
+
143
+ <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
144
+
145
+ </tr>
146
+
147
+ </tr>
148
+
149
+ <!-- 表示非表示切り替え -->
150
+
151
+ <tr id="secondBox">
152
+
153
+ <th>チーム名:</th>
154
+
155
+ <td><input type="text" class="form-control" placeholder="チーム名"/></td>
156
+
157
+ </tr>
158
+
159
+ </table>
160
+
161
+ </form>
162
+
163
+
164
+
165
+ <!--スクリプト-->
166
+
167
+ <script type="text/javascript">
168
+
169
+ function entryChange1(){
170
+
171
+ radio = document.getElementsByName('entryPlan')
172
+
173
+ if(radio[0].checked) {
174
+
175
+ //フォーム
176
+
177
+ document.getElementById('firstBox').style.display = "";
178
+
179
+ document.getElementById('secondBox').style.display = "none";
180
+
181
+ //特典
182
+
183
+ //document.getElementById('firstNotice').style.display = "";
184
+
185
+ }else if(radio[1].checked) {
186
+
187
+ //フォーム
188
+
189
+ document.getElementById('firstBox').style.display = "none";
190
+
191
+ document.getElementById('secondBox').style.display = "";
192
+
193
+ //特典
194
+
195
+ //document.getElementById('firstNotice').style.display = "none";
196
+
197
+ }
198
+
199
+ }
200
+
201
+
202
+
203
+ //オンロードさせ、リロード時に選択を保持
204
+
205
+ window.onload = entryChange1;
206
+
207
+ </script>
208
+
209
+ ```

2

追記

2018/08/28 15:43

投稿

liveasnotes
liveasnotes

スコア1284

test CHANGED
File without changes

1

追記

2018/08/28 15:42

投稿

liveasnotes
liveasnotes

スコア1284

test CHANGED
@@ -57,3 +57,11 @@
57
57
  また,同様のミスを防ぐ工夫として「インデントを整える」ことをおすすめします.
58
58
 
59
59
  ちょうど開発者ツールのように,タグの入れ子構造を記述することで,閉じタグ忘れや不要な開始タグを見つけやすくなります.あと,Web開発向けのエディタ(AtomやBrackets,VSCodeなど)は,構文エラーの有無を教えてくれます.使ってみてください.
60
+
61
+
62
+
63
+ ---
64
+
65
+ idを振るべきタグは下のタグのようです(これも,インデントを整えておけばすぐ分かる)
66
+
67
+ ![イメージ説明](5566c19d4efcae70aafa54dbf0128271.gif)