Tengo un div#subfilterNamesContainer, que contiene una lista de casillas de verificación. Estoy tratando de escribir una función que clasifique las casillas de verificación en 3 secciones.

Casillas de verificación conclass="default" debe estar en la parte superior ordenada por valor, independientemente de si está marcada o no.Entonces necesito enumerar las casillas de verificación que NOclass="default" que están marcadas, ordenadas por valor.Finalmente necesito mostrar todo el NOTclass="default" que no están marcados y nuevamente ordenados por valor.

Sería ideal tener una regla horizontal entre estas tres secciones también.

¿Cómo puedo hacer esta tarea? El objetivo es mostrar las casillas de verificación predeterminadas del usuario en la parte superior, seguidas de las casillas de verificación no predeterminadas que están marcadas, seguidas de las que no están predeterminadas, sin marcar. Esto no necesita responder a la verificación de los usuarios, solo cuando esta nueva función (llamémoslasortGiveNamesFilter) se llama.

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

El resultado final cuando se llama a mi nueva función debe ser:

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