你如何使单选按钮文本也可点击？

Posted 2023-03-05

【中文标题】你如何使单选按钮文本也可点击？

【英文标题】：How do you make the radio button text to be clickable too?

【发布时间】：2013-10-25 02:04:08

【问题描述】：

我有这个单选按钮（以及其他一些在这个之后）：

<input type="radio" name="group1" value="Milk"> Milk<br>

但如果我想激活单选按钮，我必须单击它，单击按钮右侧的“牛奶”一词不会激活它。我该怎么做？到目前为止，我发现的有关单选按钮的所有示例都有相同的问题。提前致谢。

【问题讨论】：

Radio Groups with clickable label 的可能重复项

How to associate labels with radio buttons的可能重复

【参考方案1】：

对于 React JSX

<input type="radio" name="group" value="happy" id="rad1">
<label htmlFor="rad1">YES</label>

<input type="radio" name="group" value="sad" id="rad2">
<label htmlFor="rad2">NO</label>

这两个单选按钮的名称属性相同。

【参考方案2】：

如果你使用标签标签，给你的单选按钮一个ID，你应该可以点击标签来选择单选。

<input type="radio" name="group1" value="Milk" id="rad1">
<label for="rad1">Milk</label>

http://jsfiddle.net/tvFgU/1/

这对 xhtml 1.0 strict 有效：

【讨论】：

我明白了，“for”属性在严格的 xhtml 1.0 中有效吗？

【参考方案3】：

这里要使用label标签。

类似：

            <label>
                <input type="radio" name="group1" value="Milk">
                Milk
            </label><br/>

标签告诉浏览器其中包含的所有内容都应视为一个元素（就文本而言。它们不是 div）

看看这个例子：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_label

【讨论】：

这行得通；但是，该链接显示了一个类似@Mansfield 回答的示例。

这么简单！它极大地提高了网站的可用性并使其在移动设备上更容易使用。