Question

我做了一个复选框，用于选择可供选择的各种项目单击任何复选框时，将检查第一个复选框，而不选中单击的复选框。

CSS

.checkbox { 
   overflow: hidden; 
   clip: rect(0 0 0 0); 
   height:1px; 
   width:1px; 
   padding:0;
   border:0;
   position:absolute;
}
.checkbox + label.label {
   padding-left:20px;
   height:15px; 
   display:inline-block;
   margin-top:3px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:11px;
   vertical-align:middle;
   cursor:pointer;
   float:right;
}
.checkbox:checked + label.label {
   background-position: 0 -15px;
}
.label{
   background-image:url(images/dark-check-green.png);
   color:white;
   font-size:11px;
   font-weight:100;
}

HTML

<input id="tick" class="checkbox" type="checkbox" />
<label for="tick" name="tick_box" class="label"></label>

Answer 1

对所有标签使用相同的for=""属性将导致不必要的和奇怪的行为。您应该确保每个标签+复选框的不同。

示例：

<input id="tick1" class="checkbox" type="checkbox" />
<label for="tick1" name="tick_box" class="label"></label>

<input id="tick2" class="checkbox" type="checkbox" />
<label for="tick2" name="tick_box" class="label"></label>

<input id="tick3" class="checkbox" type="checkbox" />
<label for="tick3" name="tick_box" class="label"></label>

如何解决css复选框检查问题

1 个答案: