How to sort checkboxes by class, value, and checked
<p>I have a div, <code>#subfilterNamesContainer</code>, that contains a list of checkboxes. I am trying to write a function that will sort the checkboxes in to 3 sections. </p>

<ul>
<li>Checkboxes with <code>class="default"</code> should be at the top ordered by value, regardless if it's checked or not. </li>
<li>Then I need to list the checkboxes that are NOT <code>class="default"</code> that are checked, ordered by value. </li>
<li>Finally I need to show all the NOT <code>class="default"</code> that are unchecked and again ordered by value.  </li>
</ul>

<p>It would be ideal to have a horizontal rule between these three sections as well.  </p>

<p>How can I do this task? The goal is to show the user default checkboxes at the top, followed by the non-default checkboxes that are checked, followed by the non-default, unchecked ones. This doesn't need to be responsive to the users checking, only when this new function (let's called it <code>sortGiveNamesFilter</code>) is called.</p>

<pre><code>&lt;div id="subfilterNamesContainer"&gt;
    &lt;input type="checkbox" value="X"&gt; X &lt;br&gt;
    &lt;input type="checkbox" value="A"&gt; A &lt;br&gt;
    &lt;input type="checkbox" value="A B" class="default"&gt; A B &lt;br&gt;
    &lt;input type="checkbox" value="A A" class="default"&gt; A A &lt;br&gt;
    &lt;input type="checkbox" value="F"&gt; F &lt;br&gt; &lt;--THiS ONE WILL BE CHECKED
    &lt;input type="checkbox" value="E"&gt; E &lt;br&gt; &lt;--THiS ONE WILL BE CHECKED
&lt;/div&gt;
</code></pre>

<p>Final result when my new function is called should be:</p>

<pre><code>&lt;div id="subfilterNamesContainer"&gt;
    &lt;input type="checkbox" value="A A" class="default"&gt; A A &lt;br&gt;
    &lt;input type="checkbox" value="A B" class="default"&gt; A B &lt;br&gt;
    &lt;hr&gt;
    &lt;input type="checkbox" value="E"&gt; E &lt;br&gt; &lt;--THiS ONE WILL BE CHECKED
    &lt;input type="checkbox" value="F"&gt; F &lt;br&gt; &lt;--THiS ONE WILL BE CHECKED
    &lt;hr&gt;
    &lt;input type="checkbox" value="A"&gt; A &lt;br&gt;
    &lt;input type="checkbox" value="X"&gt; X &lt;br&gt;
&lt;/div&gt;
</code></pre>