form表单中多个label对应不同的checkbox时，为什么多有的label都只触发

Question

直接上代码：

<input  type="checkbox" name="check1[]" id="check1" value="1"/>

<label for="check1" >筛选一</label>

                                

<input type="checkbox" name="check1[]" id="check2" value="2"/>

<label for="check2" >筛选二</label>

                                

<input  type="checkbox" name="check1[]" id="check3" value="3"/>

<label for="check3" >筛选三</label>

上面的代码是在一个人form中，我想要实现的是，当点击不同的label时，对应的checkbox会选中

问题：上面的代码我在Chrome中，使用手机模拟器时，无论点击哪一个label，都只触发第一个checkbox，但点击checkbox时，效果却是正确的，如下图

当Chrome不使用模拟手机模式时，不同的label对应不同的checkbox，是没问题的

Chrome版本：62.0.3202.94（正式版本） （64 位）

Answer 1

我的Chrome和你的版本一样，直接输入你给的代码，打开手机模式，没有问题是不是你页面上的其他部分，或者JavaScript影响了checkbox的行为？

Answer 2

有一个兼容性更好的方案<label for="check1" ><input type="checkbox" name="check1[]" id="check1" value="1"/>筛选一</label><label for="check2" ><input type="checkbox" name="check1[]" id="check2" value="2"/>筛选二</label><label for="check3" ><input type="checkbox" name="check1[]" id="check3" value="3"/>筛选三</label>这样的话应该更好实现，你都不用去写 for 了。