Ich habe ein div,#subfilterNamesContainer, das eine Liste von Kontrollkästchen enthält. Ich versuche, eine Funktion zu schreiben, mit der die Kontrollkästchen in drei Abschnitte unterteilt werden.

Checkboxen mitclass="default" sollte oben nach Wert sortiert sein, unabhängig davon, ob es aktiviert ist oder nicht.Dann muss ich die Kontrollkästchen auflisten, die NICHT @ sinclass="default" die markiert sind, sortiert nach Wert. Schließlich muss ich alle NOT @ zeigclass="default", die deaktiviert und wieder nach Wert sortiert sind.

s wäre ideal, auch zwischen diesen drei Abschnitten eine horizontale Linie zu habe

Wie kann ich diese Aufgabe ausführen? Ziel ist es, die Benutzer-Standard-Kontrollkästchen oben anzuzeigen, gefolgt von den nicht standardmäßig aktivierten Kontrollkästchen, gefolgt von den nicht standardmäßig deaktivierten Kontrollkästchen. Dies muss nicht auf die Überprüfung durch die Benutzer reagieren, sondern nur, wenn diese neue Funktion (nennen wir siesortGiveNamesFilter) wird genannt

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

Endergebnis, wenn meine neue Funktion aufgerufen wird, sollte sein:

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