时间戳

首页 > 解决方案 > 根据选中状态放置复选框

html - 根据选中状态放置复选框

问题描述

我很好奇是否可以根据检查状态将复选框放置在不同的区域，仅使用 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;
}

但是，当检查了两个以上的框时，我无法将它们放在两列中。

标签： htmlcssflexboxcss-grid

解决方案

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

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')
    }
  }
})

推荐阅读