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

87

有没有一种简单的方法可以使单选按钮切换-单击旁边的文本时-不会在我的小型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>

javascript html radio-button

— 亚历山大·法伯
source

164

您还可以包装元素而不必给每个元素一个ID，因为a<label>隐含了它包含的输入，如下所示：

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

— 尼克Craver
source

4

这使标签样式更加困难，并且需要将文本包装在更多元素中。

— 苏联2014年

2

是的，但是如果您没有样式，则可以更轻松地获得所需的功能。我不喜欢添加额外的ID和“用于”属性。

— C. Hilarius博士2014年

4

+1 ID可能非常邪恶，因此通常应避免使用它们

— Chris Stephens 2014年

包装是一种出色的解决方案，以使用id和for不带包装。原因是，如果标签的边距很大，并且用户碰巧单击了复选框和标签之间的最佳位置（因为它们最有可能这样做），则什么也不会发生。小提琴在这里：jsfiddle.net/v157ctja/5

— Marcus Junius Brutus

72

您可以使用<label>旨在完全做到这一点的元素：

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

— 弗雷德里克·哈米迪（FrédéricHamidi）
source

1

@亚历山大，绝对。仅Safari 2及更低版本不支持它。

— 弗雷德里克·哈米迪

3

然后，您可以使用选择器input#radCreateMode:checked ~ label将样式应用于标签。如果将输入嵌套在标签内，则无法在选择时将样式应用于标签。

— Zuhaib Ali 2016年

1

这确实应该是公认的答案，这是执行此操作的正确方法。

— greco.roamin

1

我使用的是Safari v 13，这种方法对我不起作用。可以取消选择单选按钮，但不能选择。我必须将标签包裹在输入周围：<label> <input>我的标签文本</ label>。请注意，我没有使用<form>，也没有使用<fieldset>。

— IAM_AL_X

确保for属性值是输入的正确ID。以防万一有人犯了和我一样的错误。

— 凯文.NET

5

将输入包裹在标签下应该可以。

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

— 贾森·青
source

1

我在使用这种方法查找单选按钮的值时遇到了麻烦，另一种方法是使用点击区域增加按钮的可点击区域。

— 克里斯托弗·格里格
source