質問するログイン新規登録

回答編集履歴

5

コメントに合わせてコード修正

2016/02/06 21:09

投稿

yng13
yng13

スコア215

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

コメントの修正

2016/02/06 21:09

投稿

yng13
yng13

スコア215

answer CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  ・input type="radio"にvalueが設定されていないので、このラジオボタンは選択されていてもなんの情報ももっていません。
7
7
  ・表示/非表示と活性化/非活性化は意味が違います
8
- 非活性化とは、ご自身でもコードにかかれているように、disableを使って、クリックできなくすることです
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

コメントの修正

2016/02/06 15:28

投稿

yng13
yng13

スコア215

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

誤りの修正

2016/02/06 15:27

投稿

yng13
yng13

スコア215

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名が紛らわしかったので変更

2016/02/06 15:24

投稿

yng13
yng13

スコア215

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
- document.getElementById('radio_american').style.display = "none";
29
+ american.style.display = "none";
27
- document.getElementById('radio_british').style.display = "";
30
+ britsh.style.display = "";
28
31
  break;
29
32
  case "list1": // みかんの場合
30
33
  // アメリカ人を非表示にして、イギリス人を表示
31
- document.getElementById('radio_american').style.display = "";
34
+ american.style.display = "";
32
- document.getElementById('radio_british').style.display = "none";
35
+ britsh.style.display = "none";
33
36
  // アメリカ人の選択肢を非活性化
34
- document.getElementById("american").disabled = true;
37
+ document.getElementById("radio_american").disabled = true;
35
38
  break;
36
39
  case "list2": // いちごの場合
37
40
  // アメリカ人を表示にして、イギリス人を非表示
38
- document.getElementById("radio_american").style.display = "";
41
+ american.style.display = "";
39
- document.getElementById('radio_british').style.display = "none";
42
+ britsh.style.display = "none";
40
43
  // イギリス人の選択肢を活性化
41
- document.getElementById("british").disabled = false;
44
+ document.getElementById("radio_british").disabled = false;
42
45
  // アメリカ人の選択肢を活性化
43
- document.getElementById("american").disabled = false;
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="radio_japanese">
70
+ <div id="japanese">
68
- <input type="radio" name="radio1" id="japanese" value="日本人">
71
+ <input type="radio" name="radio1" id="radio_japanese" value="日本人">
69
- <label for="japanese">日本人</label>
72
+ <label for="radio_japanese">日本人</label>
70
73
  </div>
71
- <div id="radio_american">
74
+ <div id="american">
72
- <input type="radio" name="radio1" id="american" value="アメリカ人">
75
+ <input type="radio" name="radio1" id="radio_american" value="アメリカ人">
73
- <label for="american">アメリカ人</label>
76
+ <label for="radio_american">アメリカ人</label>
74
77
  </div>
75
- <div id="radio_british">
78
+ <div id="british">
76
- <input type="radio" name="radio1" id="british" value="イギリス人" disabled>
79
+ <input type="radio" name="radio1" id="radio_british" value="イギリス人" disabled>
77
- <label for="british">イギリス人</label>
80
+ <label for="radio_british">イギリス人</label>
78
81
  </div>
79
82
  </td>
80
83
  </td>