Question

如果选中它们，我想移动复选框。

<div id="chkboxes">
<input type="checkbox" name="city" id="1"/> One <br />
<input type="checkbox" name="city" id="2"/> Two <br />
<input type="checkbox" name="city" id="3"/> Three   <br />
<input type="checkbox" name="city" id="4"/> Four    <br />
<input type="checkbox" name="city" id="5"/> Five    <br />
</div>

因此，如果选中任何复选框，它应该移动到列表顶部。我如何用jquery做到这一点？

我正在尝试构建伪代码，但无法获得逻辑。

感谢。

Answer 1

  var list = $("ul"),
        origOrder = list.children();
    
    list.on("click", ":checkbox", function() {
        var i, checked = document.createDocumentFragment(),
            unchecked = document.createDocumentFragment();
        for (i = 0; i < origOrder.length; i++) {
            if (origOrder[i].getElementsByTagName("input")[0].checked) {
                checked.appendChild(origOrder[i]);
            } else {
                unchecked.appendChild(origOrder[i]);
            }
        }
        list.append(checked).append(unchecked);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul>
<li><label><input type="checkbox" id="one" />One</label></li>
<li><label><input type="checkbox" id="two" />Two</label></li>
<li><label><input type="checkbox" id="three" />Three</label></li>
<li><label><input type="checkbox" id="four" />Four</label></li>
<li><label><input type="checkbox" id="five" />Five</label></li>
</ul>

尝试使用jquery并使用jsfiddle click here

Answer 2

您可以像这样使用JavaScript函数

$('table').on('change', '[type=checkbox]', function () {
 var $this = $(this);
 var row = $this.closest('tr');
 if ( $this.prop('checked') ){ // move to top
    row.insertBefore( row.parent().find('tr:first-child') )
        .find('label').html('move to bottom'); 
 }
 else { // move to bottom
    row.insertAfter( row.parent().find('tr:last-child') )
        .find('label').html('move to top');  
 }
});

Demo

Answer 3

使用onChange处理程序，如果选中该复选框，则克隆复选框并remove。现在使用.prepend()

将clone元素添加到复选框列表中

$(function(){
  var checkedbox;
  $('input[type="checkbox"]').on('change', function(){
    if($(this).prop('checked', 'checked')){
      checkedbox = $(this).parent().clone();
    }
    $(this).parent().remove();
    $('#chkboxes').prepend(checkedbox);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chkboxes">
<div><input type="checkbox" name="city" id="1"/> One <br /></div>
<div><input type="checkbox" name="city" id="2"/> Two <br /></div>
<div><input type="checkbox" name="city" id="3"/> Three   <br /></div>
<div><input type="checkbox" name="city" id="4"/> Four    <br /></div>
<div><input type="checkbox" name="city" id="5"/> Five    <br /></div>
</div>

在已检查的jQuery上移动复选框

3 个答案: