label直接包裹标标签获得焦点的问题

Question

  <label>慢跑
  <input type="checkbox" name="jog" id="1" /></label>
  <br>
  <label>登山
  <input type="checkbox" name="climb" id="2" /></label>
  <br>
  <label>篮球
  <input type="checkbox" name="basketball" id="3" /></label>

  <label>慢跑
  <input type="checkbox" name="jog" id="1" /><br>
  登山
  <input type="checkbox" name="climb" id="2" /><br>
  篮球
  <input type="checkbox" name="basketball" id="3" />
  </label>

对比上面的两段代码，为什么不可以用一个label标签将三个input标签全部包裹用三个label标签分别包裹三个input标签却可以？

Answer 1

其实你不用label也是可以的，你要搞清楚为什么用label呢？或者这样说，你最先要清楚的应该是label标签的作用是什么！你也知道是获得焦点，但愿你懂究竟什么焦点。就是这个选项本来必须点那个圈才能选中，现在是直接点在这个选项所在的位置，比如文字都可以直接选中这个标签。那很明显的就是，label让“必须是这个input所在的位置”的任意地方被点击都可以凝聚一个焦点区选中它。如果多个input 公用一个LABEL  获得焦点之后凝聚在谁身上？总不能全部选中吧？所以规范就是，只能凝聚一个焦点。那么你先用当然就必须每个单独使用了你的提问其实很有创意，但是可惜的是，规范并没有如你所想的规定符合你想法的标签。而是规定了一个一对一使用的label。你可以联想一下ul   li  为什么li必须一个对应一个而不能一个li包裹所有。label 亦是如此！

Answer 2

label标签包裹input标签，是为了在点击label标签时，里面包裹的input标签可以获得焦点，是一一对应的。所以三个input标签要分别用三个label标签来包裹。

Answer 3

一个label只可以获得一个焦点

Answer 4

现在已经不用包裹来获得焦点了，都是在for标签中增加for属性来设置。

Answer 5

你可以设置label的display为block