我怎样才能制作<div>
移至父级中的顶部 <div>
,基于选中的复选框? IE。如果选中某行的复选框,则将该行移动到顶部。
$("#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>
最佳答案
您可以使用$(this).is(":checked")
来了解复选框是否被选中。这是完整的代码。
$(document).on('click', '#player-list input[type=checkbox].oncourt',function(){
if($(this).is(":checked")){
$(this).parent().prependTo("#player-list");
}else{
$(this).parent().appendTo("#player-list")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>
关于javascript - 如何在复选框检查时将 div 移动到其父级的顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51494947/