代码之家 › 专栏 › 技术社区 › Alexander Farber

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

radio-button html javascript

Alexander Farber · 技术社区 · 14 年前

有没有一种简单的方法可以使单选按钮切换-当点击它附近的文本时-而不在我的smal 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>

4 回复 | 直到 11 年前

159

Vikas Arora 10 年前

您还可以包装元素没有给他们每个人一个身份证,因为 <label> 对于它包含的输入是隐式的,如下所示:

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

Frédéric Hamidi 14 年前

你可以用 <label> 元素,其目的正是:

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

Jason Ching 9 年前

将输入包装在标签下应该可以工作。

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

Community CDub 7 年前

我用这种方法找不到单选按钮的值,另一种方法是使用命中区域 increasing clickable area of a button .

推荐文章

lily · 淘汰-如何将动态填充的复选框转换为单选按钮(是/否)?

6 年前

user8039194 · 无线电检查时显示/隐藏表单

6 年前

blake mcgarry · 如何使两个事件侦听器都工作

6 年前

Pablo Araya · jQuery,在输入[type=radio]时更改验证内容如果为false,则调用其他2个函数

6 年前

Hai Pernikahanku · 如何在android studio上选择单选按钮

6 年前

Kyle Underhill · CSS检查不聚焦

6 年前

user8385766 · 角度单选按钮[关闭]

7 年前

t3ax · 为什么我可以选中多个单选按钮?

7 年前

Rohalt · 选择单选按钮时清除输入

7 年前

alex108 · 如何在同一行中显示两个单选按钮?

7 年前