根据选中状态放置复选框答案

【问题标题】：Placing checkboxes based on their checked status根据选中状态放置复选框
【发布时间】：2021-10-27 06:51:57
【问题描述】：

我很好奇是否可以根据复选框的选中状态将复选框放置在不同的区域中，仅使用 CSS！当有一个很好的可理解的解决方案时，我是一个纯 CSS 的忠实粉丝。

我显然把我所有的希望都寄托在了 grid 和 flex 上，但是我无法想出一个我想要的解决方案。

我希望这张图片能说明我的整个问题：

“A 区”中的激活复选框以及“B 区”中未激活的复选框。两列。

HTML 就像这样简单：

<div class="options">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">checkbox</label>

    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">checkbox</label>

    ...
</div>

输入和标签标签被包装时也可以。而且我可以在包装标签上切换一个类...（当然使用 JS）

<div class="options">
    <div class="checked">
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1">checkbox</label>
    </div>

    <div class="">
        <input type="checkbox" id="checkbox2">
        <label for="checkbox2">checkbox</label>
    </div>

    ...
</div>

我用这种方法尝试过的 CSS：

.options {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.checked {
    grid-row: 1;
}

但是当检查多个盒子时，我无法设法将它们保留在两列中。

【问题讨论】：

请说明您目前尝试过的方法
使用 JS 是可以的，但仅使用 CSS 是不可能在父包装器中添加类名并使其对齐的。
您是否在 CSS 中寻找 :checked 选择器？没有 Javascript 就无法添加或删除类（正如@abin-thaha 所说），但我不知道仅使用此选择器是否可以实现您想要的！
@JohnP，同意您的回复。但是Yannik，你为什么不能用JS来做呢？
正如@JohnP 提到的，:checked 选择器可用于将选中的元素与flex-end 对齐，如果您正在为父级使用弹性框布局。

标签： html css flexbox css-grid

【解决方案1】：

我做了一些工作来看看我能想出什么，遗憾的是我无法准确地创造出你所要求的东西，但它可能已经足够接近你需要的东西了，或者提供一些创造性的输入 :)

https://codepen.io/noex98/pen/OJgVqZr

HTML：

<div class="options">
  <div class="checkWrap">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">checkbox 1</label>
  </div>
  <div class="checkWrap">
    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">checkbox 2</label>
  </div>
  <div class="checkWrap">
    <input type="checkbox" id="checkbox3">
    <label for="checkbox3">checkbox 3</label>
  </div>
  <div class="checkWrap">
    <input type="checkbox" id="checkbox4">
    <label for="checkbox4">checkbox 4</label>
  </div>
    <div class="checkWrap">
    <input type="checkbox" id="checkbox5">
    <label for="checkbox5">checkbox 5</label>
  </div>
  <div class="checkWrap">
    <input type="checkbox" id="checkbox6">
    <label for="checkbox6">checkbox 6</label>
  </div>
</div>

CSS：

.options {
    display: flex;
    flex-wrap:wrap; 
}

.checkWrap {
    width:50%;
}

.checkWrap--checked {
    order: -1;
}

JS：

let wrappers = document.querySelectorAll('.checkWrap')
document.querySelector('.options').addEventListener('click', () => {
  for (wrapper of wrappers){
    if (wrapper.getElementsByTagName('input')[0].checked == true){
      wrapper.classList.add('checkWrap--checked')
    } else {
      wrapper.classList.remove('checkWrap--checked')
    }
  }
})

【讨论】：