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

【问题标题】：How to move a div to the top of its parent on checkbox check?如何在复选框检查时将 div 移动到其父级的顶部？
【发布时间】：2018-07-24 09:18:38
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案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>

【讨论】：

【解决方案2】：

使用display: flex;，您可以更改元素的顺序。因此，您可以在 row 中添加和删除带有 order: -1; 的类，将其移动到列表顶部，而无需修改 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>

【讨论】：

非常感谢。你更进一步。 :)