javascript - 如何在复选框检查时将 div 移动到其父级的顶部？

Question

我怎样才能制作<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>

Answer 1

您可以使用$(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>