在选中的 jQuery 上移动复选框答案

【问题标题】：Move checkboxes on checked jQuery在选中的 jQuery 上移动复选框
【发布时间】：2016-12-14 23:27:12
【问题描述】：

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

<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 做到这一点？

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

谢谢。

【问题讨论】：

你可以使用jQuery的insertBefore方法。捕获选中的输入，删除它们并将它们插入到第一个复选框之前。

标签： jquery html checkbox

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

【讨论】：

谢谢 .. 正是我要找的 .. 所以当复选框未选中时，该框将按其原始顺序列出。干杯:)

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

【讨论】：

【解决方案3】：

使用onChange 处理程序，如果选中该复选框，则克隆该复选框和remove 它。现在使用.prepend()将克隆元素添加到复选框列表中

$(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>

【讨论】：

【解决方案4】：

另一个示例，但此示例始终将选中的元素保持在顶部，而不是将最后选中的元素移动到顶部。

const checkboxContainer = $(".checkbox-container");

checkboxContainer.delegate("input", "change", function () {
    const checkedCheckboxes = checkboxContainer.find("input:checkbox:checked").parent();
    const uncheckedCheckboxes = checkboxContainer.find("input:checkbox:not(:checked)").parent();

    checkboxContainer.find("> *").remove();

    checkboxContainer.append(checkedCheckboxes);
    checkboxContainer.append(uncheckedCheckboxes);
});

 .checkbox-item {
    display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-container">
    <label class="checkbox-item">
        <input type="checkbox" value="1" />
        Item 1
    </label>

    <label class="checkbox-item">
        <input type="checkbox" value="1" />
        Item 2
    </label>

    <label class="checkbox-item">
        <input type="checkbox" value="1" />
        Item 3
    </label>

    <label class="checkbox-item">
        <input type="checkbox" value="1" />
        Item 4
    </label>

    <label class="checkbox-item">
        <input type="checkbox" value="1" />
        Item 5
    </label>
</div>

【讨论】：