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

Question

我有这个单选按钮(和其他一些后):

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

但是,如果我想激活单选按钮,我必须单击它,单击按钮右侧的"Milk"一词,不会激活它.我怎么能这样做呢？到目前为止我发现的关于单选按钮的所有例子都有同样的问题.提前致谢.

Answer 1

在这里,您要使用标签标签.

就像是:

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

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

看一下这个例子:http://www.w3schools.com/tags/tryit.asp？filename = tryhtml_label

Answer 2

如果您使用标签标签,为您的单选按钮提供ID,您应该可以单击标签以选择无线电.

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

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

这对xhtml 1.0严格有效:

Answer 3

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

这里的 Name 属性对于两个单选按钮都是相同的。