多个自定义复选框(HTML) - 如何使它们彼此分开响应

Question

我目前正在尝试重新格式化我的一个项目中的复选框，以更好地适合UI的设计，但是我正在努力使复选框分开反应。当我单击下部框时，上部框检查/取消选中，下部框中什么也没有发生。这可能可以通过在复选框中添加ID来解决，但是（a）我不确定将ID标签放在哪里，并且（b）最终必须使用JavaScript动态创建此HTML，因为这些是任务中元素的容器管理应用程序。

单击复选框时，我也希望为Div带有类Redbox的Div来更改颜色，但这是一个稍小的紧迫问题。如果您知道如何解决这两个问题，我将非常感谢您的帮助！

代码：（我认为我包含了所有相关代码，但是如果仍然缺少某些相关代码，请告诉我！）

（CSS）

.taskspacer{
  height:5px;
}
.taskout{
  width:100%;
  height:100px;
  background-color:#e0e0e0;
  padding-bottom:1px;
}
.taskcontain{
  width:calc(100% - 2px);
  height:100px;
  background-color:#ffffff;
}
.redbox{
  width:100px;
  height:100px;
  background-color:#f53240;
  float:left;
  padding:0;
}
.infobox{
  float:right;
  height:100px;
  width:calc(100% - 101px);
}
input[type=checkbox]{
  visibility:hidden;
}
.check{
  width:50px;
  height:50px;
  position:relative;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}
.check label{
  cursor: pointer;
  position:absolute;
  width:50px;
  height:50px;
  top:0;
  left:0;
  background: rgba(255,255,255,0.5);
}
.check label:after{
  opacity:0;
  content: '';
  position: absolute;
  width: 18px;
  height: 10px;
  background: transparent;
  top: 13px;
  left: 13px;
  border: 6px solid #ffffff;
  border-top:none;
  border-right:none;
  transform: rotate(-45deg);
}
.check label:hover::after{
  opacity:0.4;
}
.check input[type=checkbox]:checked + label:after{
  opacity:1;
}

（html）

<div class="taskout">
              <div class="taskcontain">
                <div class="redbox">
                <!--center checkbox-->
                  <div class="check">
                    <input type="checkbox" value="1" id="checkboxInput" name="">
                    <label for="checkboxInput"></label>
                  </div>
                </div>
                <div id="infobox">
                  <!--task information-->
                  <div class = "date"></div>
                  <div class = "taskname"></div>
                  <div class = "bigname"></div>
                  <div class = "bigdate"></div>
                </div>
              </div>
            </div>
            <div style="height:5px;"></div>
            <div class="taskout">
              <div class="taskcontain">
              </div>
            </div>
            <div class="taskout">
              <div class="taskcontain">
                <div class="redbox">
                  <!--center checkbox-->
                  <div class="check">
                    <input type="checkbox" value="1" id="checkboxInput" name="">
                    <label for="checkboxInput"></label>
                  </div>
                </div>
                <div id="infobox">
                  <!--task information-->
                  <div class = "date"></div>
                  <div class = "taskname"></div>
                  <div class = "bigname"></div>
                  <div class = "bigdate"></div>
                </div>
              </div>
            </div>
            <div style="height:5px;"></div>
            <div class="taskout">
              <div class="taskcontain">
              </div>
            </div>

Answer 1

，因为您的两个复选框都具有相同的ID。ID需要在页面上 unique ，无法重复。您的标记无效，这就是为什么它行为奇怪的原因。

只需将id和匹配的<label>的for属性更改为新ID，它将按预期工作。

<input type="checkbox" value="1" id="checkboxInput2">
<label for="checkboxInput2"></label>

请参阅下文：

.taskspacer {
  height: 5px;
}
.taskout {
  width: 100%;
  height: 100px;
  background-color: #e0e0e0;
  padding-bottom: 1px;
}
.taskcontain {
  width: calc(100% - 2px);
  height: 100px;
  background-color: #ffffff;
}
.redbox {
  width: 100px;
  height: 100px;
  background-color: #f53240;
  float: left;
  padding: 0;
}
.infobox {
  float: right;
  height: 100px;
  width: calc(100% - 101px);
}
input[type=checkbox] {
  visibility: hidden;
}
.check {
  width: 50px;
  height: 50px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.check label {
  cursor: pointer;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
}
.check label:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 18px;
  height: 10px;
  background: transparent;
  top: 13px;
  left: 13px;
  border: 6px solid #ffffff;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
.check label:hover::after {
  opacity: 0.4;
}
.check input[type=checkbox]:checked+label:after {
  opacity: 1;
}

<div class="taskout">
  <div class="taskcontain">
    <div class="redbox">
      <!--center checkbox-->
      <div class="check">
        <input type="checkbox" value="1" id="checkboxInput">
        <label for="checkboxInput"></label>
      </div>
    </div>
    <div id="infobox">
      <!--task information-->
      <div class="date"></div>
      <div class="taskname"></div>
      <div class="bigname"></div>
      <div class="bigdate"></div>
    </div>
  </div>
</div>
<div style="height:5px;"></div>
<div class="taskout">
  <div class="taskcontain">
  </div>
</div>
<div class="taskout">
  <div class="taskcontain">
    <div class="redbox">
      <!--center checkbox-->
      <div class="check">
        <input type="checkbox" value="1" id="checkboxInput2">
        <label for="checkboxInput2"></label>
      </div>
    </div>
    <div id="infobox">
      <!--task information-->
      <div class="date"></div>
      <div class="taskname"></div>
      <div class="bigname"></div>
      <div class="bigdate"></div>
    </div>
  </div>
</div>
<div style="height:5px;"></div>
<div class="taskout">
  <div class="taskcontain">
  </div>
</div>