jquery - 移动选中的 jQuery 上的复选框

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