Eu tenho uma div#subfilterNamesContainer, que contém uma lista de caixas de seleção. Estou tentando escrever uma função que classifique as caixas de seleção em três seções.

Caixas de seleção comclass="default" deve estar no topo ordenado por valor, independentemente de estar marcado ou não.Então eu preciso listar as caixas de seleção que NÃO sãoclass="default" que são verificados, ordenados por valor.Finalmente, preciso mostrar todos os NOTclass="default" desmarcadas e novamente ordenadas por valor.

Seria ideal também ter uma regra horizontal entre essas três seções.

Como posso executar esta tarefa? O objetivo é mostrar as caixas de seleção padrão do usuário na parte superior, seguidas pelas caixas de seleção não padrão marcadas, seguidas pelas caixas de seleção não padrão e desmarcadas. Isso não precisa ser responsivo à verificação dos usuários, apenas quando essa nova função (vamos chamá-lasortGiveNamesFilter) é chamado.

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

O resultado final quando minha nova função é chamada deve 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>