多个复选框，只有一个可选

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>