回答編集履歴
5
コメントに合わせてコード修正
answer
CHANGED
@@ -38,6 +38,7 @@
|
|
38
38
|
// アメリカ人の選択肢を非活性化
|
39
39
|
document.getElementById("radio_american").disabled = true;
|
40
40
|
break;
|
41
|
+
case "選択してください: // 選択してください、にはvalueが設定されていない
|
41
42
|
case "list2": // いちごの場合
|
42
43
|
// アメリカ人を表示にして、イギリス人を非表示
|
43
44
|
american.style.display = "";
|
@@ -75,7 +76,7 @@
|
|
75
76
|
<input type="radio" name="radio1" id="radio_american" value="アメリカ人">
|
76
77
|
<label for="radio_american">アメリカ人</label>
|
77
78
|
</div>
|
78
|
-
<div id="british">
|
79
|
+
<div id="british" style="display:none;">
|
79
80
|
<input type="radio" name="radio1" id="radio_british" value="イギリス人" disabled>
|
80
81
|
<label for="radio_british">イギリス人</label>
|
81
82
|
</div>
|
4
コメントの修正
answer
CHANGED
@@ -5,7 +5,7 @@
|
|
5
5
|
|
6
6
|
・input type="radio"にvalueが設定されていないので、このラジオボタンは選択されていてもなんの情報ももっていません。
|
7
7
|
・表示/非表示と活性化/非活性化は意味が違います
|
8
|
-
非活性化とは、ご自身でもコードにかかれているように、
|
8
|
+
非活性化とは、ご自身でもコードにかかれているように、disabledを使って、クリックできなくすることです
|
9
9
|
・このケースだと、if-elseで条件分岐をするよりも、switch-caseで分岐したほうが、条件ごとの処理をまとめてかけるからスッキリするのではないでしょうか?
|
10
10
|
|
11
11
|
```html
|
@@ -69,7 +69,7 @@
|
|
69
69
|
<td>
|
70
70
|
<div id="japanese">
|
71
71
|
<input type="radio" name="radio1" id="radio_japanese" value="日本人">
|
72
|
-
<label for="radio_japanese">日本人</label>
|
72
|
+
<label for="radio_japanese" checked>日本人</label>
|
73
73
|
</div>
|
74
74
|
<div id="american">
|
75
75
|
<input type="radio" name="radio1" id="radio_american" value="アメリカ人">
|
3
コメントの修正
answer
CHANGED
@@ -32,7 +32,7 @@
|
|
32
32
|
document.getElementById("radio_british").disabled = false;
|
33
33
|
break;
|
34
34
|
case "list1": // みかんの場合
|
35
|
-
// アメリカ人を
|
35
|
+
// アメリカ人を表示にして、イギリス人を非表示
|
36
36
|
american.style.display = "";
|
37
37
|
britsh.style.display = "none";
|
38
38
|
// アメリカ人の選択肢を非活性化
|
2
誤りの修正
answer
CHANGED
@@ -28,6 +28,8 @@
|
|
28
28
|
// アメリカ人を非表示にして、イギリス人を表示
|
29
29
|
american.style.display = "none";
|
30
30
|
britsh.style.display = "";
|
31
|
+
// イギリス人の選択肢を活性化
|
32
|
+
document.getElementById("radio_british").disabled = false;
|
31
33
|
break;
|
32
34
|
case "list1": // みかんの場合
|
33
35
|
// アメリカ人を非表示にして、イギリス人を表示
|
@@ -40,8 +42,6 @@
|
|
40
42
|
// アメリカ人を表示にして、イギリス人を非表示
|
41
43
|
american.style.display = "";
|
42
44
|
britsh.style.display = "none";
|
43
|
-
// イギリス人の選択肢を活性化
|
44
|
-
document.getElementById("radio_british").disabled = false;
|
45
45
|
// アメリカ人の選択肢を活性化
|
46
46
|
document.getElementById("radio_american").disabled = false;
|
47
47
|
break;
|
1
id名が紛らわしかったので変更
answer
CHANGED
@@ -20,27 +20,30 @@
|
|
20
20
|
var value = document.getElementById("selectList").value;
|
21
21
|
// console.log(value);
|
22
22
|
|
23
|
+
var american = document.getElementById("american");
|
24
|
+
var britsh = document.getElementById("british");
|
25
|
+
|
23
26
|
switch (value) {
|
24
27
|
case "list0": // りんごの場合
|
25
28
|
// アメリカ人を非表示にして、イギリス人を表示
|
26
|
-
|
29
|
+
american.style.display = "none";
|
27
|
-
|
30
|
+
britsh.style.display = "";
|
28
31
|
break;
|
29
32
|
case "list1": // みかんの場合
|
30
33
|
// アメリカ人を非表示にして、イギリス人を表示
|
31
|
-
|
34
|
+
american.style.display = "";
|
32
|
-
|
35
|
+
britsh.style.display = "none";
|
33
36
|
// アメリカ人の選択肢を非活性化
|
34
|
-
document.getElementById("
|
37
|
+
document.getElementById("radio_american").disabled = true;
|
35
38
|
break;
|
36
39
|
case "list2": // いちごの場合
|
37
40
|
// アメリカ人を表示にして、イギリス人を非表示
|
38
|
-
|
41
|
+
american.style.display = "";
|
39
|
-
|
42
|
+
britsh.style.display = "none";
|
40
43
|
// イギリス人の選択肢を活性化
|
41
|
-
document.getElementById("
|
44
|
+
document.getElementById("radio_british").disabled = false;
|
42
45
|
// アメリカ人の選択肢を活性化
|
43
|
-
document.getElementById("
|
46
|
+
document.getElementById("radio_american").disabled = false;
|
44
47
|
break;
|
45
48
|
}
|
46
49
|
}
|
@@ -64,17 +67,17 @@
|
|
64
67
|
<tr>
|
65
68
|
<td>国籍</td>
|
66
69
|
<td>
|
67
|
-
<div id="
|
70
|
+
<div id="japanese">
|
68
|
-
<input type="radio" name="radio1" id="
|
71
|
+
<input type="radio" name="radio1" id="radio_japanese" value="日本人">
|
69
|
-
<label for="
|
72
|
+
<label for="radio_japanese">日本人</label>
|
70
73
|
</div>
|
71
|
-
<div id="
|
74
|
+
<div id="american">
|
72
|
-
<input type="radio" name="radio1" id="
|
75
|
+
<input type="radio" name="radio1" id="radio_american" value="アメリカ人">
|
73
|
-
<label for="
|
76
|
+
<label for="radio_american">アメリカ人</label>
|
74
77
|
</div>
|
75
|
-
<div id="
|
78
|
+
<div id="british">
|
76
|
-
<input type="radio" name="radio1" id="
|
79
|
+
<input type="radio" name="radio1" id="radio_british" value="イギリス人" disabled>
|
77
|
-
<label for="
|
80
|
+
<label for="radio_british">イギリス人</label>
|
78
81
|
</div>
|
79
82
|
</td>
|
80
83
|
</td>
|