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

是否有一个简单的方法，使一个单选按钮切换-当它附近的文本被点击-没有引入任何大的 Javascript 框架到我的小 PHP 项目？

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>

102286 次浏览

小开

You can use <label> elements, which are designed to do exactly that:

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

小开

最佳答案

You can also wrap your elements without giving them each an ID, since a <label> is implicitly for the input it contains, like this:

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

小开

Wrapping the input under the label should work.

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

小开

I had trouble finding the value of the radio button using this method, an alternative is to use a hit area increasing clickable area of a button.