Html 标签不适用于复选框

label not working with checkbox

提问by Phillip Senn

OK, what am I missing? I have:

好吧，我错过了什么？我有：

<form>
    <input type="checkbox" name="showRatings" value="1" checked>
    <label for="showRatings">Show Ratings</label>
</form>

And when I click on the "Show Ratings" text, the checkbox is not toggling. I know it's something simple.

当我点击“显示评级”文本时，复选框不会切换。我知道这很简单。

回答by David

I believe the labelelement links to the idattribute, not the nameattribute. Try this:

我相信label元素链接到id属性，而不是name属性。尝试这个：

<form>
  <input type="checkbox" name="showRatings" id="showRatings" value="1" checked>
  <label for="showRatings">Show Ratings</label>
</form>

Reference here.

参考这里。

回答by prashantsahni

When input element is inside the label then we do not need id on the element and 'for' attribute on the label, but when it is outside we need it.

当输入元素在标签内时，我们不需要元素上的 id 和标签上的 'for' 属性，但当它在标签外时，我们需要它。

<label>
    Foo
    <input name="foo" type="checkbox" />
</label>

Clicking on "Foo" will trigger a toggle of the checkbox

单击“Foo”将触发复选框的切换