单选按钮在标签标签内使用时发生故障
Radio button malfunctioning when used inside label tag
我正在研究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>
单选按钮需要一个通用的名称。如果不给它们一个name
属性,每个单选按钮本质上就变成了一个单向复选框。你可以选择它们,但不能取消选择。
<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />
<input type="radio" value="3" />
在这种情况下,两个foo
单选按钮将在内部链接,因为它们都命名相同,但值为3
的按钮将完全独立,并作为您的。
添加组名
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>
1。无线电组需要一个名称,以便浏览器知道选择了哪个
2。如果你想把标签放在输入的外面,你可以使用属性告诉浏览器这个标签是针对那个具有相同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>
后写a
相关文章:
- 在<页眉>标签
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- iframe正在添加标签,需要删除它们
- javascript.点击隐藏事件故障
- 如何自动调整标签的高度以适应内容
- Jquery标签插件粘贴问题
- Twitter引导程序Typeahead-Id&标签
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- Morris.js折线图x轴标签在调整大小后消失
- JavaScript goto 标签如何使用内部循环
- 显示某个用户ID的某个标签的30张Instagram图片
- 标签客户端的设置值
- 谷歌图表显示所有标签
- 如何在图片和边缘之间居中设置标签
- JS条件故障排除
- 尝试初始化()Spine's控制器和故障
- 物体故障
- 在Datatables中设置本地化后,需要更改标签文本
- 第二组标签及其内容赢得'默认情况下t加载
- 单选按钮在标签标签内使用时发生故障