如何解决检查输入时更改flexbox的顺序?
我一直在想,如果复选框被选中,是否可以更改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
}
谢谢!
解决方法
我想这就是你想要的
这是我的代码-> 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。