如何在复选框选中时将 div 移动到其父级的顶部？
发布于2025-01-19 22:37 阅读(183) 评论(0) 点赞(5) 收藏(1)
如何根据选中的复选框<div>在父级内移动到顶部？例如，如果选中了某一行的复选框，则将该行移动到顶部。<div>
$("#player-list input[type=checkbox].oncourt").live('click', function(){
$(this).parent().prependTo("#player-list")
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="player-list">
<div class="row">
<div id=1><input type="checkbox" class="oncourt"> ROW 1</div>
</div>
<div class="row">
<div id=2><input type="checkbox" class="oncourt"> ROW 2</div>
</div>
<div class="row">
<div id=3><input type="checkbox" class="oncourt"> ROW 3</div>
</div>
<div class="row">
<div id=4><input type="checkbox" class="oncourt"> ROW 4</div>
</div>
<div class="row">
<div id=5><input type="checkbox" class="oncourt"> ROW 5</div>
</div>
<div class="row">
<div id=6><input type="checkbox" class="oncourt"> ROW 6</div>
</div>
<div class="row">
<div id=7><input type="checkbox" class="oncourt"> ROW 7</div>
</div>
<div class="row">
<div id=8><input type="checkbox" class="oncourt"> ROW 8</div>
</div>
</div>解决方案
display: flex;你可以改变元素的顺序。因此，你可以添加和删除带有的类，order: -1;将row其移动到列表顶部，而无需修改 DOM，这样你就可以轻松地保持原始顺序
$(document).on('change', '.oncourt', function() {
if( $(this).is(":checked") ) {
$(this).closest('.row').addClass('is-checked');
} else {
$(this).closest('.row').removeClass('is-checked');
}
});#player-list {
display: flex;
flex-direction: column;
}
.is-checked {
order: -1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="player-list">
<div class="row">
<div id=1><input type="checkbox" class="oncourt"> ROW 1</div>
</div>
<div class="row">
<div id=2><input type="checkbox" class="oncourt"> ROW 2</div>
</div>
<div class="row">
<div id=3><input type="checkbox" class="oncourt"> ROW 3</div>
</div>
<div class="row">
<div id=4><input type="checkbox" class="oncourt"> ROW 4</div>
</div>
<div class="row">
<div id=5><input type="checkbox" class="oncourt"> ROW 5</div>
</div>
<div class="row">
<div id=6><input type="checkbox" class="oncourt"> ROW 6</div>
</div>
<div class="row">
<div id=7><input type="checkbox" class="oncourt"> ROW 7</div>
</div>
<div class="row">
<div id=8><input type="checkbox" class="oncourt"> ROW 8</div>
</div>
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/538958/44e80801d2e3c143522f/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力