通过点击标签来切换HTML单选按钮

是否有简单的方法让单选按钮切换 - 当点击附近的文本时 - 没有向我的小PHP项目中引入任何大的Javascript框架？通过点击标签来切换HTML单选按钮

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>

来源

2010-11-18 Alexander Farber

130

你也可以换你的元素没有给他们每一个ID，因为<label>隐式地包含它的输入，如下所示：

<label> 
    <input type="radio" name="mode" value="create"> 
    <i>create table</i> 
</label>

来源

2010-11-18 09:23:59

这使得标签造型变得更加困难，并且需要将文字包裹在更多元素中。 – Soviut 2014-05-12 16:03:55

是的，但如果你不是造型，它可以更容易地获得你想要的功能。我不喜欢添加额外的ID和“for”属性。 – 2014-08-21 00:25:13

+1 ID可能非常邪恶，所以最好避免它们作为一般规则 – 2014-08-29 20:12:43

您可以使用<label>元素，其目的是为了做到这些：

<input type="radio" id="radCreateMode" name="mode" value="create" /> 
<label for="radCreateMode"><i>create table</i></label>

来源

2010-11-18 09:16:16

谢谢，它是否适用于所有现代浏览器？ – 2010-11-18 09:18:32

@亚历山大，绝对。只有Safari版本2及更低版本不支持它。 – 2010-11-18 09:19:34

然后，您可以使用选择器'input＃radCreateMode：checked〜label'将样式应用于标签。如果我们将输入嵌套在标签内，则在选择时将样式应用于标签是不可能的。 – 2016-02-04 12:45:49

包装标签下的输入应该工作。

<label> 
    <input type="radio" name="mode" value="create"><i>create table</i> 
</label>

来源

2015-11-29 03:14:37

此答案不依赖于id属性 - 一件好事！ – user1068352 2016-05-27 11:31:15

我很难找到使用这种方法的单选按钮的值，一个替代方案是使用一个命中区域increasing clickable area of a button。

来源

2016-12-06 02:15:02

通过点击标签来切换HTML单选按钮

回答

相关问题