html - 使 css 组复选框独立工作

Question

我从codepen复制了一个复选框代码.在我将其更改为我的偏好后它工作得很好，但问题是，如果复选框单独工作(只有一个检查它是否在上面一个)。有什么办法可以让它们中的 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 的一个实例