Question

如何根据选中的复选框将<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>

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>

Answer 2

使用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>

如何将div复选框的div移到其父级的顶部？

2 个答案: