Question

我正在尝试创建一个清单，将检查的项目排序到列表顶部，当取消选中某个项目时，它将移动到选中的项目下方。除了选中/未选中的排序，项目应保持原始顺序，无论他们签入的顺序如何。

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

不是这个：
*三个
*两个
一个
4个
5个

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

理想情况下，我也希望为转型制作动画。另外，有没有办法记住多个页面上的已检查状态？

这是我开始使用的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>

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

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

将选中的项目保留在列表顶部

2 个答案: