Changing order of flexbox when input is checked? - html

Question

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!

Answer 1

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>