单个Input对应多Label的Checkbox动画触发问题

问题的核心是：你有两个<label>关联到同一个<input type="checkbox">，但当前CSS只针对input + label的相邻元素关系生效，而.select-label的标签和input并非相邻元素，所以需要调整选择器来关联它们的状态。

下面是修改后的完整代码，我会标注关键改动：

修改后的HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectall-btn">
  <input type="checkbox" id="selectall" class="select-all" name="select-check" />
  <label class="select-label" for="selectall"><span></span>Select All </label>
</div>
<div class="post-list">
  <!-- 给每个item添加统一容器，让select-label和shrink成为兄弟元素 -->
  <div class="item">
    <div class="select-container">
      <div class="selectall-btn">
        <label class="select-label" for="post-select1"><span></span> </label>
      </div>
      <div class="shrink">
        <div class="select-block">
          <label class="pick-select">
            <input id="post-select1" type="checkbox" class="select-input" name="select-check">
          </label>
          1
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="select-container">
      <div class="selectall-btn">
        <label class="select-label" for="post-select2"><span></span> </label>
      </div>
      <div class="shrink">
        <div class="select-block">
          <label class="pick-select">
            <input id="post-select2" type="checkbox" class="select-input" name="select-check">
          </label>
          2
        </div>
      </div>
    </div>
  </div>
</div>

修改后的CSS #

.pick-select {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  cursor: pointer; /* 让整个区域可点击，增强交互感 */
}
.shrink {
  height: 50px;
  width: 50px;
  border: 3px solid;
  position: relative;
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transform: scale(1);
}
.shrink.active {
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transform: scale(0.8);
  border: 2px solid red;
}
.select-label {
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.select-label span {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 15px;
  height: 15px;
  transform-origin: center;
  border: 2px solid silver;
  border-radius: 50%;
  vertical-align: -6px;
  margin-right: 10px;
  transition: background-color 150ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}
input[name="select-check"] {
  display: none;
}

/* 关键改动：利用父级容器的兄弟选择器，关联input和对应的select-label */
.select-container input[name="select-check"]:checked ~ .selectall-btn .select-label span,
input[name="select-check"]:checked + label span {
  background-color: blue;
  border-color: blue;
  transform: scale(1.25);
}

.select-container input[name="select-check"]:checked ~ .selectall-btn .select-label span:after,
input[name="select-check"]:checked + label span:after {
  content: ''; /* 补上缺失的content属性，伪元素才能显示 */
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 2px;
  background: #fff;
  transition: width 150ms ease 100ms;
}

.select-container input[name="select-check"]:checked ~ .selectall-btn .select-label span:before,
input[name="select-check"]:checked + label span:before {
  content: ''; /* 补上缺失的content属性 */
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%) rotate(-45deg);
  width: 5px;
  height: 2px;
  background: #fff;
  transition: width 150ms ease 100ms;
}

JS代码（无需修改，保留原逻辑） #

$(document).ready(function() {
  $(".select-all").on("click", function() {
    $(this).is(":checked") ?
      $(".select-input")
      .prop("checked", true)
      .change() :
      $(".select-input")
      .prop("checked", false)
      .change();
  });
  $("input[name='select-check']:checkbox").change(function() {
    if ($(this).is(":checked")) {
      if ($("input[name='select-check']:checkbox:not(:checked)").length == 0) {
        $(".select-all").prop("checked", true);
      }
      $(this)
        .closest(".shrink")
        .addClass("active");
    } else {
      $(".select-all").prop("checked", false);
      $(this)
        .closest(".shrink")
        .removeClass("active");
    }
  });
});

关键说明： #

1. HTML结构调整：给每个item里的.selectall-btn和.shrink添加了共同父级.select-container，这样可以用CSS的兄弟选择器(~)来跨元素关联input和对应的.select-label。
2. CSS选择器优化：新增了.select-container input[name="select-check"]:checked ~ .selectall-btn .select-label span选择器，当input被选中时，找到同一容器下的.select-label里的span，同步应用动画效果。
3. 修复伪元素问题：原来的CSS中伪元素span:after和span:before缺少content属性，补上后才能显示勾选的对号图标。
4. 增强交互性：给.pick-select添加了cursor: pointer，让整个点击区域的交互更直观。

这样不管你点击.pick-select区域还是.select-label的复选框图标，两个地方都会同步触发动画，并且.shrink的缩放效果也会正常生效。

内容的提问来源于stack exchange，提问作者Kyle Underhill