鍍金池/ 問答/HTML5  HTML/ form表單中多個(gè)label對(duì)應(yīng)不同的checkbox時(shí)，為什么多有的label

form表單中多個(gè)label對(duì)應(yīng)不同的checkbox時(shí)，為什么多有的label都只觸發(fā)第一個(gè)checkbox

直接上代碼：

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

上面的代碼是在一個(gè)人form中，我想要實(shí)現(xiàn)的是，當(dāng)點(diǎn)擊不同的label時(shí)，對(duì)應(yīng)的checkbox會(huì)選中

問題：上面的代碼我在Chrome中，使用手機(jī)模擬器時(shí)，無(wú)論點(diǎn)擊哪一個(gè)label，都只觸發(fā)第一個(gè)checkbox，但點(diǎn)擊checkbox時(shí)，效果卻是正確的，如下圖

chrome模擬手機(jī)出現(xiàn)問題

當(dāng)Chrome不使用模擬手機(jī)模式時(shí)，不同的label對(duì)應(yīng)不同的checkbox，是沒問題的

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

回答
編輯回答
卟乖

我的Chrome和你的版本一樣，直接輸入你給的代碼，打開手機(jī)模式，沒有問題
是不是你頁(yè)面上的其他部分，或者JavaScript影響了checkbox的行為？

2017年10月4日 14:03
編輯回答
短嘆

有一個(gè)兼容性更好的方案
<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>

這樣的話應(yīng)該更好實(shí)現(xiàn)，你都不用去寫 for 了。

2018年8月3日 21:13