Javascript 将选中的项目放在列表的顶部

我试图创建一个清单，将选中的项目排序到列表的顶部，当项目未选中时，它将移动到选中项目的下方。除了选中/未选中排序之外，项目应保持其原始顺序，而不管其签入的顺序如何

换句话说，五项列表应始终如下所示：
*两个
*三个
一个
四个
五个

不是这个：
*三个
*两个
一个
四个
五个

我见过一些例子，说明了如何将单击的项移动到列表中的特定位置，但没有考虑列表中其他项的状态

理想情况下，我还希望设置过渡动画。还有，有没有一种方法可以跨多个页面记住选中的状态

这是我开始使用的HTML：

<form>
<ul>
<li><label for="one"><input type="checkbox" id="one" />One</label></li>
<li><label for="two"><input type="checkbox" id="two" />Two</label></li>
<li><label for="three"><input type="checkbox" id="three" />Three</label></li>
<li><label for="four"><input type="checkbox" id="four" />Four</label></li>
<li><label for="five"><input type="checkbox" id="five" />Five</label></li>
</ul>
</form>

一个
两个
三
四
五

确定尝试以下操作：

html:

<form>
    <ul>
    <li id="1"><label for="one"><input type="checkbox" id="one" />One</label></li>
    <li id="2"><label for="two"><input type="checkbox" id="two" />Two</label></li>
    <li id="5"><label for="five"><input type="checkbox" id="five" />Five</label></li>
    <li id="3"><label for="three"><input type="checkbox" id="three" />Three</label></li>
    <li id="4"><label for="four"><input type="checkbox" id="four" />Four</label></li>       
    </ul>
</form>

现在要重新排列它们，请使用：

$("li").sort(sortNum).appendTo("ul");

---

选择原始列表以保存订单。单击其中一个复选框时，对其进行迭代，首先添加选中项，然后添加未选中项：

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);
});

var list=$（“ul”），
origOrder=list.children（）；
list.on（“单击“，”：复选框”，函数（）{
var i，checked=document.createDocumentFragment（），
未选中=document.createDocumentFragment（）；
对于（i=0；i

---

演示：

@artmem Upvote and accept如果有帮助，那么未来的用户会知道有没有办法添加一个按钮来清除复选框并恢复到原始的项目顺序？我尝试了一些方法，我可以取消复选框，但顺序不会恢复。

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);
});