Html 使css组复选框独立工作

我从中复制了一个复选框代码。在我将其更改为我的首选项后，它可以完美地工作，但问题是，如果只有一个复选框，则该复选框可以工作（只有一个复选框会检查其是否高于一个）。有没有什么方法可以让他们中的ecah独立工作，而不必每次我需要它时都更改类和id

HTML

---

您所有的复选框都有相同的ID。并且您标签的

for=“

都指向相同的ID。使它们不同，这将解决您的问题。你的身份证必须不同。在给定页面上只能有一个特定ID的实例

您遇到的问题是ID的多次使用

委员会：

正在查找id为=“roundedOne”的输入

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

---

所以我必须更改标签和ID？是的，每组输入和标签

for=“”

需要有自己的ID记录唯一ID：和

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

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

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