0

我正在研究 html 和 CSS。我必须在我的页面上添加 5 个单选按钮，并且我已在<label>标签内添加。但是当我寻找页面时。它显示所有选中的单选按钮，我也无法取消选择它。问题是我一次只需要选择一个单选按钮。这是我的代码。

<label class="radio"><input type="radio"> Pepse</label> 
<label class="radio"><input type="radio"> Coke</label> 
<label class="radio"><input type="radio">Mirinda</label>
<label class="radio"><input type="radio">Maaza </label>
4

3 回答 3

4

单选按钮需要一个通用名称。如果你不给它们一个name属性，每个单选按钮本质上都会变成一个单向复选框。您可以选择它们，但不能取消选择它们。

<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />

<input type="radio" value="3" />

在这种情况下，两个foo单选按钮将在内部链接，因为它们的名称相同，但具有值的单选按钮将3完全独立并按照您的方式行事。

于 2013-06-06T15:20:06.743 回答
0

添加组名。

jsFiddle

<label class="radio"><input name="drinks" type="radio">Pepse</label>
<label class="radio"><input name="drinks" type="radio">Coke</label>
<label class="radio"><input name="drinks" type="radio">Mirinda</label>
<label class="radio"><input name="drinks" type="radio">Maaza </label>
<label class="radio"><input name="drinks" type="radio">Milk Frothers</label>
于 2013-06-06T15:20:47.980 回答
0

1.一组收音机需要一个名称，以便浏览器知道选择了哪一个

2.如果你想把标签放在输入之外，你可以使用for属性告诉浏览器这个标签是给那个具有相同id的收音机的

<label for="a">a</label>
<input type="radio" name="aname" id="a" value="a"><br>
<label for="b">b</label>
<input type="radio" name="aname" id="b" value="b"><br>
<label for="c">c</label>
<input type="radio" name="aname" id="c" value="c"><br>
<label for="d">d</label>
<input type="radio" name="aname" id="d" value="d"><br>

但我也更喜欢标签内的收音机所以

<label><input type="radio" name="aname" value="a">a</label><br>
<label><input type="radio" name="aname" value="b">b</label><br>
<label><input type="radio" name="aname" value="c">c</label><br>
<label><input type="radio" name="aname" value="d">d</label><br>
<label><input type="radio" name="aname" value="e">e</label><br>

3.通常他们也需要一个值，除了你使用js

<label><input type="radio" name="aname">a</label><br>
<script>
document.write(document.getElementsByTagName('label')[0].childNodes[1].nodeValue)
</script>

之后写<br>

于 2013-06-06T15:30:05.280 回答