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

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

javascript html

Javascript 通过单击其标签切换HTML单选按钮,javascript,html,radio-button,Javascript,Html,Radio Button,有没有一种简单的方法可以在单击单选按钮附近的文本时进行单选按钮切换，而无需在我的smal PHP项目中引入任何大型Javascript框架 web表单如下所示： <html> <body> <form method="post"> <p>Mode:<br /> <input type="radio" name="mode" value="create"><i>create table</i><

有没有一种简单的方法可以在单击单选按钮附近的文本时进行单选按钮切换，而无需在我的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>

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


模式：

创建表

选择记录（可以指定id）

插入1条记录（必须指定全部）

删除记录（必须指定id）

下拉表


Id:（32个十六进制字符）
纬度：（在-90和90之间）
经度：（介于-90和90之间）
速度：（非负）

您可以使用元素，这些元素的设计正是为了：

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


创建表

您也可以包装元素，而不给每个元素一个ID，因为

隐式地表示它包含的输入，如下所示：

<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>

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


创建表

将输入包装在标签下应该有效

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


创建表

我用这种方法很难找到单选按钮的值，另一种方法是使用命中区域。

@Alexander，绝对正确。只有Safari版本2及更低版本不支持它。此后，您可以使用选择器

input\radCreateMode:checked~label

将样式应用于标签。如果我们将输入嵌套在标签中，则无法在选择时将样式应用于标签。这确实应该是公认的答案，这是正确的方法。我使用的是Safari v 13，这种方法对我不起作用。单选按钮可以取消选择，但不能选择。我必须将标签环绕输入：我的标签文本。请注意，我没有使用，也没有使用。请确保for属性值是输入的正确id。以防万一，如果有人犯了与我相同的错误。这会使标签的样式设置更加困难，并要求您将文本包含在更多元素中。是的，但如果您不设置样式，则更容易获得所需的功能。我不喜欢添加额外的ID和“for”属性。+1 ID可能非常有害，因此最好避免使用它们，因为一般规则包装是使用

ID

和

for

而不使用包装的一个更好的解决方案。原因是，如果标签有很宽的边距，并且用户恰好在复选框和标签之间的最佳位置单击（他们很可能会这样做），那么什么也不会发生。在这里拉小提琴：