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

Ale*_*ber 85 html javascript radio-button

请问一个简单的方法来制作单选按钮切换 - 当单击它附近的文本时 - 没有在我的小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>
Run Code Online (Sandbox Code Playgroud)

Nic*_*ver 159

你也可以包装你的元素而不给每个元素一个ID,因为<label>它隐含地包含它所包含的输入,如下所示:

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>
Run Code Online (Sandbox Code Playgroud)

  • 这使得标签样式更加困难,并且需要将文本包装在更多元素中. (3认同)
  • +1 ID可能非常邪恶,因此最好将它们作为一般规则来避免 (3认同)
  • 包装是比使用不包装的“id”和“for”更好的解决方案。原因是,如果标签具有较宽的边距,并且用户碰巧单击了复选框和标签之间的最佳位置(因为他们最有可能这样做),那么什么也不会发生。在这里小提琴:https://jsfiddle.net/v157ctja/5/ (3认同)
  • 是的,但是如果你没有造型,它可以更容易地获得你想要的功能.我不喜欢添加额外的ID和"for"属性. (2认同)

Fré*_*idi 66

您可以使用<label>旨在实现此目的的元素:

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>
Run Code Online (Sandbox Code Playgroud)

  • 这确实应该是公认的答案,这是做到这一点的正确方法。 (4认同)
  • 然后,您可以使用选择器`input #radCreateMode:checked~label`将样式应用于标签.如果我们将输入嵌套在标签内,则无法在选择时将样式应用于标签. (2认同)

Jas*_*ing 5

将输入包裹在标签下应该可以。

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>
Run Code Online (Sandbox Code Playgroud)