Question

我一直在想，如果复选框被选中，是否可以更改flexbox的顺序。如果我不使用form或div包装器，则可以使其正常工作。一旦选中复选框，是否可以将整个form容器订购到order 4？我目前正在定位-

input:checked+label, input:checked {
  order: 4;
}

如何将form元素添加到CSS选择器？

    <div class="list__container">
      <form>
        <input id="item1" type="checkbox" />
        <label for="item1">Create a to-do list</label>
      </form>
     /* Or DIV*/
      <div>
        <input id="item2" type="checkbox" />
        <label for="item2">Prepare for <strong>the test</strong></label>
      </div>
      
      <h1 className="todo"></h1>
      <h1 className="completed"></h1>

    </div>

.list__container {
  display: flex;
  flex-direction: column;
}

.todo {
  order: 1;
}

.done {
  order: 2;
}

input:checked+label, input:checked {
  order: 4;
}

input:not(checked)+label, input:not(checked) {
  order: 2
}

谢谢！

Answer 1

我想这就是你想要的

这是我的代码-> https://codepen.io/jdchavarro/pen/VwjQQBW

const items = document.getElementsByClassName("item-list");

for(let item of items) {
  item.onclick = () => {
    item.classList.toggle("last");
  };
}

.container {
  display: flex;
  flex-direction: column;
}

.last {
  order: 1;
}

<div class="container">
  
  <div class="item-list">
    <input type="checkbox" name="item1">
    <label for="item1">item1</label>
  </div>
  
  <div class="item-list">
    <input type="checkbox" name="item2">
    <label for="item2">item2</label>
  </div>
  
  <div class="item-list">
    <input type="checkbox" name="item3">
    <label for="item3">item3</label>
  </div>
  
  <div class="item-list">
    <input type="checkbox" name="item4">
    <label for="item4">item4</label>
  </div> 
  
</div>

检查输入时更改flexbox的顺序？

1 个答案: