0

我已经在这个问题上摸索了一个小时，但我无法弄清楚为什么 Radiobuttons 会出现这种奇怪的行为。以下是我的代码：

<label>Language
  <input type="radio" id="de" value="de" onclick="switchRadioButtons(this);" >de
  <input type="radio" id="en" value="en" onclick="switchRadioButtons(this);" >en
  <input type="radio" id="other" value="other" onclick="switchRadioButtons(this);" >other
  <input type="text" id="language" value="" /><br />
</label>

<script>
  function switchRadioButtons(element) {
    console.log(element.value);  
</script>

因此，在我看来，每当我单击值或按钮本身时，单选按钮的值都应写入控制台。这适用于按钮本身，但如果我点击按钮旁边的标签/描述，无论我做什么，它都会打印“de”（第一项）（我也尝试过“switchRadioButtons（document.getElementById（ '其他'));" 无效）。

谁能向我解释为什么会发生这种情况并提供解决方案？

4

2 回答 2

8

You have all of your inputs inside the same label! If you click on it, it's gonna trigger the 1st element ('de'). It doesn't know that you wanted to trigger one of the other ones.

You need to have a separate label for each element.

于 2013-07-24T15:29:46.100 回答
2
  • 将组添加到您的输入
  • 删除包含输入的标签
  • 自动关闭输入标签 xHTML 的东西...

瞧，它起作用了：

http://jsfiddle.net/techunter/Z3fU7/

HTML

<label for="de">Deutch</label>
<input type="radio" name="lang" id="de" value="de" onclick="switchRadioButtons(this);" />
<label for="en">English</label>
<input type="radio" name="lang" id="en" value="en" onclick="switchRadioButtons(this);" />
<label for="other">Other</label>
<input type="radio" name="lang" id="other" value="other" onclick="switchRadioButtons(this);" />
<input type="text" id="language" value="" />

JS

function switchRadioButtons(element) {
    console.log(element.value);
}
于 2013-07-24T15:33:30.087 回答