title: Moving checked items to the top after unchecking all items
body: <p>I implemented a solution, moving checked items to top of list, using</p>
  
  <p><a href="https://stackoverflow.com/questions/8746913/keep-checked-items-at-top-of-list">Keep checked items at top of list</a></p>
  
  <p>Now, I have an anchor to uncheck all items in the list. The items are unchecked once we click the anchor tag. But the items are not sorting. It should default to first displayed list, as in html list:</p>
  
  <pre><code>var list = $("ul"),
      origOrder = list.children();
  
  list.on("click", ":checkbox", function () {
      var i, checked = document.createDocumentFragment(),
          unchecked = document.createDocumentFragment();
      for (i = 0; i &lt; origOrder.length; i++) {
          if (origOrder[i].getElementsByTagName("input")[0].checked) {
              checked.appendChild(origOrder[i]);
          } else {
              unchecked.appendChild(origOrder[i]);
          }
      }
      list.append(checked).append(unchecked);
  });
  </code></pre>
  
  <p>The demo of the scenario can be found here
  <a href="http://jsfiddle.net/RPN3x/" rel="nofollow noreferrer">http://jsfiddle.net/RPN3x/</a></p>