Keep checked items at top of list
<p>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.</p>

<p>In other words, a five item list should always look like this:<br />
* two<br />
* three<br />
one<br />
four<br />
five<br /></p>

<p>not this:<br />
*three<br />
*two<br />
one<br />
four<br />
five<br /></p>

<p>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.</p>

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

<p>This is the HTML I'm starting with:</p>

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