Changing order of flexbox when input is checked?

user_12062163 0
Viewed 76

I was was wondering if it's possible to change the order of my flexbox if the checkbox gets checked. I can get it to work if I don't use the form or div wrapper. Is it possibe to order the whole form container to order 4 once checkbox is checked? I am currently targeting -

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

How can I add form element to the css selectors?

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

Thanks!

flexbox checkbox input css html
1 Answers

I think this is what you want

Here my code -> 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>

user_145367160
Related