質問編集履歴

2

誤字修正

2021/05/17 06:21

投稿

yujin1202
yujin1202

スコア56

test CHANGED
File without changes
test CHANGED
@@ -228,7 +228,7 @@
228
228
 
229
229
  <後記> 
230
230
 
231
- Yambeje さん、ありがとうございました。
231
+ Yambejp さん、ありがとうございました。
232
232
 
233
233
  一発で解決しました。
234
234
 

1

最終コード追加

2021/05/17 06:21

投稿

yujin1202
yujin1202

スコア56

test CHANGED
File without changes
test CHANGED
@@ -221,3 +221,169 @@
221
221
  コード
222
222
 
223
223
  ```
224
+
225
+
226
+
227
+
228
+
229
+ <後記> 
230
+
231
+ Yambeje さん、ありがとうございました。
232
+
233
+ 一発で解決しました。
234
+
235
+ 下記に最終コードを記載しておきます。
236
+
237
+ 尚、チェックボックスで選択しない場合は、"no"ではなく、空白("")とする事にしました。
238
+
239
+
240
+
241
+ ```ここに言語を入力
242
+
243
+ <!doctype html>
244
+
245
+ <html lang="ja">
246
+
247
+ <head>
248
+
249
+ <meta charset="utf-8">
250
+
251
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
252
+
253
+ <title>test</title>
254
+
255
+ </head>
256
+
257
+ <body>
258
+
259
+ <h1>Test</h1>
260
+
261
+ <p>Where do you want to go ???</p>
262
+
263
+ <form action="/" method="POST" enctype="multipart/form-data">
264
+
265
+ <div>
266
+
267
+ <p>Select at least one(1) country.</p>
268
+
269
+ </div>
270
+
271
+ <br>
272
+
273
+ <div>
274
+
275
+ <label for="ck1">Afgahanistan:</label>
276
+
277
+ <input type="checkbox" id="ck1" name="checkbox" value="Afgahanistan">
278
+
279
+ </div>
280
+
281
+ <div>
282
+
283
+ <label for="ck2">Australia:</label>
284
+
285
+ <input type="checkbox" id="ck2" name="checkbox" value="Australia">
286
+
287
+ </div>
288
+
289
+ <div>
290
+
291
+ <label for="ck3">England:</label>
292
+
293
+ <input type="checkbox" id="ck3" name="checkbox" value="England">
294
+
295
+ </div>
296
+
297
+ <div>
298
+
299
+ <label for="ck4">France:</label>
300
+
301
+ <input type="checkbox" id="ck4" name="checkbox" value="France">
302
+
303
+ </div>
304
+
305
+ <div>
306
+
307
+ <input type="submit" value="SEND">
308
+
309
+ </div>
310
+
311
+ </form>
312
+
313
+
314
+
315
+ <br>
316
+
317
+ <br>
318
+
319
+
320
+
321
+ <p> Your selected countries are belows.</p>
322
+
323
+ <p> ↓ ↓ ↓</p>
324
+
325
+ <p id="msg"></p>
326
+
327
+
328
+
329
+ <script>
330
+
331
+
332
+
333
+ function valueChange(){
334
+
335
+ let res=[];
336
+
337
+ res.push(ck1.checked?'afganistan':'');
338
+
339
+ res.push(ck2.checked?'Australia':'');
340
+
341
+ res.push(ck3.checked?'England':'');
342
+
343
+ res.push(ck4.checked?'France':'');
344
+
345
+ msg.innerHTML=res.join("<br>");
346
+
347
+ }
348
+
349
+
350
+
351
+ let ck1= document.getElementById('ck1');
352
+
353
+ ck1.addEventListener('change',valueChange);
354
+
355
+ let ck2= document.getElementById('ck2');
356
+
357
+ ck2.addEventListener('change',valueChange);
358
+
359
+ let ck3= document.getElementById('ck3');
360
+
361
+ ck3.addEventListener('change',valueChange);
362
+
363
+ let ck4= document.getElementById('ck4');
364
+
365
+ ck4.addEventListener('change',valueChange);
366
+
367
+
368
+
369
+ let msg = document.getElementById('msg');
370
+
371
+
372
+
373
+
374
+
375
+ </script>
376
+
377
+
378
+
379
+ </body>
380
+
381
+
382
+
383
+
384
+
385
+ </html>
386
+
387
+
388
+
389
+ ```