Question

我从codepen复制了一个复选框代码。它改变后我的偏好，但问题是，如果单独一个复选框（只有一个检查其上面的），它的工作原理是完美的。是否有任何方法可以使ecah中的ecah独立工作，而无需在每次需要时更改类和id。 FIDDLE HERE

HTML

<div class="roundedOne">
      <input type="checkbox" value="None" id="roundedOne" name="check" />
      <label for="roundedOne"></label>
</div>
 <div class="roundedOne">
      <input type="checkbox" value="None" id="roundedOne" name="check" />
      <label for="roundedOne"></label>
</div>

    <div class="roundedOne">
      <input type="checkbox" value="None" id="roundedOne" name="check" />
      <label for="roundedOne"></label>
</div>

    <div class="roundedOne">
      <input type="checkbox" value="None" id="roundedOne" name="check" />
      <label for="roundedOne"></label>
</div>

CSS

.roundedOne {
  width: 20px;
  height: 20px;
  position: relative;
  background: #fcfff4;
  border: 2px solid #77c100;
  border-radius: 3px;
}

.roundedOne label:after {
  content: '';
  width: 14.5px;
  height: 15px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #77c100;
  opacity: 0;
  border-radius: 3px;
}
.roundedOne label:hover::after {
  opacity: 0.3;
}
.roundedOne input[type=checkbox] {
  visibility: hidden;
}
.roundedOne input[type=checkbox]:checked + label:after {
  opacity: 1;
}

Answer 1

您的所有复选框都具有相同的ID。而且您的标签for=""都指向相同的ID。使它们不同，这应该解决您的问题。您的ID必须不同。您只能在给定页面上拥有特定ID的一个实例

Answer 2

您的问题在于多次使用ID。

在：

<label for="roundedOne"></label>

正在寻找id =＆＃34; roundedOne＆＃34;。

的输入

由于您的所有输入都共享该ID，因此它将转到第一个ID。尝试为每个输入添加唯一ID，并更改标签以匹配，这应该可以解决您的问题。

Here's a fiddle of the above changes.

使css组复选框独立工作

2 个答案: