标签不使用复选框

Question

好的,我错过了什么？我有:

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

当我点击"显示评级"文本时,复选框不会切换.我知道这很简单.

Answer 1

我相信label元素链接到id属性,而不是name属性.试试这个:

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

参考这里.

标签不需要在之前或之后,它确实无关紧要.但是有什么关系(并且让我困扰了一段时间)是你需要加倍检查没有重复的ID或标签.可能会有一个意外生成或放置在某处.因此,请打开Chrome检查器并进行快速搜索以确保. (31认同)
另请注意,您需要在标记中使用"value".没有它标签是不可点击的 (7认同)
哦,它,它!而已!谢谢大卫! (3认同)
@David 是的，这就是我的观点。有时，人们可能会不小心滑进去；） (3认同)

Answer 2

当input元素在标签内部时,我们不需要元素上的id和标签上的'for'属性,但是当它在外面时我们需要它.

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

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