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。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: