active - javascript checkbox set checked

Cómo ordenar las casillas de verificación por clase, valor y verificado

Question

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.

• Las casillas de verificación con class="default" deben estar en la parte superior ordenadas por valor, independientemente de si están marcadas o no.
• Entonces necesito listar las casillas que NO son class="default" que están marcadas, ordenadas por valor.
• Finalmente, necesito mostrar todas las NOT class="default" que están desmarcadas y ordenadas nuevamente 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 por las casillas de verificación no predeterminadas que están marcadas, seguidas de las que no están predeterminadas y no marcadas. No es necesario que responda a las comprobaciones de los usuarios, solo cuando se sortGiveNamesFilter esta nueva función (llamémoslo sortGiveNamesFilter ).

<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 llame a mi nueva función debería 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>

Answer 1

En primer lugar, deberá modificar su HTML ligeramente para que cuando se vuelvan a organizar las casillas de verificación también se mueva el nodo de texto junto a ellas. Para hacer esto, puede rodear ambos nodos con un elemento de label , como este:

<div id="subfilterNamesContainer">
    <label>
        <input type="checkbox" value="X"> X
    </label>
    <label>
        <input type="checkbox" value="A"> A
    </label>
    <label>
        <input type="checkbox" value="A A" class="default"> A A
    </label>
    <label>
        <input type="checkbox" value="A B" class="default"> A B
    </label>
    <label>
        <input type="checkbox" value="F" checked="true"> F
    </label>
    <label>
        <input type="checkbox" value="E" checked="true"> E
    </label>
</div>

Para lograr la clasificación de los elementos de label puede usar el método sort() , proporcionando su propia función que define la lógica de clasificación para colocar .default casillas de verificación .default , luego aquellas que se verifican, y luego no se verifican, con cada subsección ordenada por el value de la casilla de verificación. Una vez que se completa la clasificación, puede buscar los últimos elementos .default y :checked y agregar una hr después de ellos. Algo como esto:

function sortGiveNamesFilter() {
    $(''#subfilterNamesContainer label'').sort(function(a, b) {
        var $a = $(a).find('':checkbox''),
            $b = $(b).find('':checkbox'');

        if ($a.hasClass(''default'') && !$b.hasClass(''default''))
            return -1;
        else if (!$a.hasClass(''default'') && $b.hasClass(''default''))
            return 1;

        if ($a.is('':checked'') && !$b.is('':checked''))
            return -1;
        else if (!$a.is('':checked'') && $b.is('':checked''))
            return 1;

        if ($a.val() < $b.val())
            return -1;
        else if ($a.val() > $b.val())
            return 1;

        return 0;
    }).appendTo(''#subfilterNamesContainer'');

    $(''#subfilterNamesContainer .default:last, #subfilterNamesContainer :checked:last'').closest(''label'').after(''<hr />'');
}

Ejemplo de trabajo

Tenga en cuenta que el código JS puede hacerse más corto con el uso de expresiones ternarias, solo lo guardé detallado para que fuera obvio cómo estaba funcionando.