哪种才是正确写法

Question

<label for="box"> <span>点我</span> </label>
<input id="box" type="checkbox">

<label for="box"> 
    <span>点我</span>
    <input id="box" type="checkbox"> 
</label>

把checkbox设置display: none;的话 感觉没有区别

Answer 1

第一种写法是正确的，第二种也没错。
label的作用是当你鼠标选择label里的内容的时候，自动帮你将焦点转移到关联的表单上。
因此如果你把关联的表单写到label内部的时候，会造成二次触发。
首先，label替你触发一次，然而checkbox本身也会触发。

Answer 2

label标签元素不会向用户呈现任何特殊效果。说明

Answer 3

都对。 label标签的作用就是将焦点定位到表单元素。下面的例子中，for可以不写。