将勾选项目置于列表顶部

Question

我正在尝试创建一个清单，可以将已勾选的项目排序到列表顶部，并且当一个项目未被勾选时，它会移动到已勾选项目的下方。除了已勾选/未勾选的排序之外，不管以什么顺序勾选它们，项目都应保留它们的原始顺序。

换句话说，一个有五个项目的列表应该始终如下所示：
* 二
* 三
一
四
五

而不是像这样：
* 三
* 二
一
四
五

我看到过如何将点击的项目移动到列表中特定位置的示例，但没有考虑列表中其他项目的状态。

理想情况下，我还希望能够动画显示过渡效果。此外，是否有一种方法可以在多个页面之间记住勾选状态？

以下是我要开始使用的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>

- artmem

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

演示： http://jsfiddle.net/scSYV/2

- Dennis

---

如果有帮助，请点赞并接受答案，这样未来的用户也会知道。 - Dennis

有没有办法添加一个按钮来清除复选框并恢复原始项目顺序？我尝试了几种方法，可以取消选择框，但顺序不会恢复。 - artmem

Answer 2

好的，请尝试这个：

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>

JavaScript：

function sortNum(a,b){  
    a = $(a);
    b = $(b);
    if( a.find("input").is(':checked') && !b.find("input").is(':checked') )
        return -1;      
    if( !a.find("input").is(':checked') && b.find("input").is(':checked') )
        return 1;
    else    
        return a.attr('id') > b.attr('id') ? 1 : -1;  
}; 

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

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

- redmoon7777