通过单击标签来切换 HTML 单选按钮
Posted
技术标签:
【中文标题】通过单击标签来切换 HTML 单选按钮【英文标题】：Toggle HTML radio button by clicking its label 【发布时间】：2011-05-11 22:06:25 【问题描述】：是否有一种简单的方法来切换单选按钮 - 当单击它附近的文本时 - 无需在我的小型 php 项目中引入任何大型 javascript 框架？
Web 表单如下所示：
<html>
<body>
<form method="post">
<p>Mode:<br />
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>
<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>
【问题讨论】：
【参考方案1】：你也可以包装你的元素而不给每个元素一个ID，因为<label>隐含地表示它包含的输入，像这样：
<label>
<input type="radio" name="mode" value="create">
<i>create table</i>
</label>
【讨论】：
这使得标签样式更加困难，并且需要您将文本包含在更多元素中。 是的，但是如果您不进行样式设置，则可以更轻松地获得所需的功能。我不喜欢添加额外的 ID 和“for”属性。 +1 ID 可能非常邪恶，因此作为一般规则最好避免使用它们 换行是使用id 和for 而不进行换行的更好解决方案。原因是如果标签的边距很大并且用户碰巧点击了复选框和标签之间的最佳位置（因为他们最有可能这样做），那么什么也不会发生。在这里摆弄：jsfiddle.net/v157ctja/5
当输入在你的表中时你会做什么？在这种情况下如何应用标签？我现在使用id 和for 在每个<td> 中使用标签。我应该在哪里使用标签以便样式不会改变？【参考方案2】：
您可以使用 <label> 元素，这些元素旨在做到这一点：
<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>
【讨论】：
@Alexander，绝对的。只有 Safari 2 及更低版本不支持。 然后您可以使用选择器input#radCreateMode:checked ~ label 将样式应用于标签。如果我们将输入嵌套在标签内，则无法在选择时将样式应用于标签。
这确实应该是公认的答案，这是正确的方法。
我使用的是 Safari v 13，但这种方法对我不起作用。可以取消选择单选按钮，但不能选择。我必须将标签包裹在输入周围：。请注意，我没有使用
确保 for 属性值是输入的正确 id。以防万一有人犯了和我一样的错误。【参考方案3】：
将输入包装在标签下应该可以工作。
<label>
<input type="radio" name="mode" value="create"><i>create table</i>
</label>
【讨论】：
【参考方案4】：我无法使用这种方法找到单选按钮的值，另一种方法是使用点击区域increasing clickable area of a button。
【讨论】：
以上是关于通过单击标签来切换 HTML 单选按钮的主要内容，如果未能解决你的问题，请参考以下文章
html中<radio>单选按钮控件标签用法解析及如何设置默认选中