Keep checked items at top of list

Question

I'm trying to create a checklist that will sort checked items to the top of the list, and when an item is unchecked, it will move below the checked items. Beyond the checked/unchecked sort, items should stay in their original order, regardless of what order they are checked in.

In other words, a five item list should always look like this:
* two
* three
one
four
five

not this:
*three
*two
one
four
five

I've seen examples of how to move clicked items to a specific position in the list, but nothing that takes into account the state of other items in the list.

Ideally I'd also like to animate the transition. Also, is there a way to remember the checked state across multiple pages?

This is the HTML I'm starting with:

<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

Select the original list to save the order. When one of the checkboxes is clicked, iterate over it, appending the checked items first and the unchecked items second:

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

Demo: http://jsfiddle.net/scSYV/2

Answer 2

ok try this:

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

now to rearrange them use :

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