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

有没有简单的方法来做一个单选button切换 – 当附近的文本被点击 – 没有引入任何大的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> 

你也可以包装你的元素而不给每个元素ID,因为<label>对于它包含的input是隐含的,就像这样:

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

您可以使用<label>元素,这些元素的devise目的是:

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

包装标签下的input应该工作。

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

我很难find使用这种方法的单选button的值,另一种方法是使用点击区域增加button的可点击区域 。