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 了。