单击其标签切换HTML单选按钮

Question

Is there please a simple way to make a radio button toggle - when a text near it is clicked - without introducing any big Javascript Framework into my smal PHP project? 请问一个简单的方法来制作单选按钮切换 - 当单击它附近的文本时 - 没有在我的小PHP项目中引入任何大的Javascript框架？

The web form looks like this: 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>

Answer 1

You can also wrap your elements without giving them each an ID, since a <label> is implicitly for the input it contains, like this: 您也可以包装元素而不给每个元素一个ID，因为<label>隐式包含它所包含的输入，如下所示：

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

Answer 2

You can use <label> elements, which are designed to do exactly that: 您可以使用<label>元素，这些元素旨在实现以下目标：

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

Answer 3

Wrapping the input under the label should work. 将标签下的输入包装起来应该有效。

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

Answer 4

我无法使用此方法查找单选按钮的值，另一种方法是使用增加按钮的可点击区域的命中区域。

单击其标签切换HTML单选按钮

问题描述

4 个解决方案

解决方案1
153 已采纳 2010-11-18 09:23:59

解决方案2
63 2010-11-18 09:16:16

解决方案3
5 2015-11-29 03:14:37

解决方案4
1 2016-12-06 02:15:02

单击其标签切换HTML单选按钮

问题描述

4 个解决方案

解决方案1 153 已采纳 2010-11-18 09:23:59

解决方案2 63 2010-11-18 09:16:16

解决方案3 5 2015-11-29 03:14:37

解决方案4 1 2016-12-06 02:15:02

解决方案1
153 已采纳 2010-11-18 09:23:59

解决方案2
63 2010-11-18 09:16:16

解决方案3
5 2015-11-29 03:14:37

解决方案4
1 2016-12-06 02:15:02