多個複選框，只有一個可選

Question

所以我在頁面上有這些複選框，但不管我點擊哪一個複選框，只有第一個複選框被選中。我不知道問題是什麼。起初，我的問題是複選框不會顯示爲選中狀態，但現在只是第一個選中的選項。在頁面上有一個按鈕可以選擇所有的框，並且這是可行的，只是當用戶試圖選擇一個不起作用的框時。

代碼

.checkbox { 
     margin: 3px auto; 
     width: 25px; 
     position: relative; 
} 
.checklabel { 
     cursor: pointer; 
     position: absolute; 
     width: 25px; 
     height: 25px; 
     top: 0; 
     left: 0; 
     background: #eee; 
     border:1px solid #ddd; 
} 
.checkbox .checklabel:after { 
     opacity: 0.2; 
     content: ''; 
     position: absolute; 
     width: 9px; 
     height: 5px; 
     background: transparent; 
     top: 6px; 
     left: 7px; 
     border: 3px solid #333; 
     border-top: none; 
     border-right: none; 

     transform: rotate(-45deg); 
} 
.checklabel:hover::after { 
     opacity: .5; 
} 
.checkbox input[type=checkbox]:checked + .checklabel:after { 
     opacity: 1; 
} 



<td><div class="checkbox"><input class="check" id="check" type="checkbox"><label class="checklabel" for="check"></label></div></td> 
<td><div class="checkbox"><input class="check" id="check" type="checkbox"><label class="checklabel" for="check"></label></div></td> 

Answer 1

的id may only be used once per page，和你的標籤for屬性需要引用獨特id您要它來控制輸入。

.checkbox { 
 
    margin: 3px auto; 
 
    width: 25px; 
 
    position: relative; 
 
} 
 

 
.checklabel { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 25px; 
 
    height: 25px; 
 
    top: 0; 
 
    left: 0; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.checkbox .checklabel:after { 
 
    opacity: 0.2; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 9px; 
 
    height: 5px; 
 
    background: transparent; 
 
    top: 6px; 
 
    left: 7px; 
 
    border: 3px solid #333; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.checklabel:hover::after { 
 
    opacity: .5; 
 
} 
 

 
.checkbox input[type=checkbox]:checked + .checklabel:after { 
 
    opacity: 1; 
 
}

<td> 
 
    <div class="checkbox"><input class="check" id="check" type="checkbox"><label class="checklabel" for="check"></label></div> 
 
</td> 
 

 
<td> 
 
    <div class="checkbox"><input class="check" id="check2" type="checkbox"><label class="checklabel" for="check2"></label></div> 
 
</td>