JQuery para resaltar los elementos de una lista

Question

Tengo una lista ol:

<ol>
<li class="group1">item 1</li>
<li class="group1">item 2</li>
<li class="group2"> item 3</li>
<li class="group3">item 4</li>
<li class="group1">item 5</li>
<li class="group3"> item 6</li>
<ol>

y un conjunto de casillas de verificación que corresponden a los nombres de clase

<input type="checkbox" value="group1" />group 1
<input type="checkbox" value="group2" />group 2
<input type="checkbox" value="group3" />group 3

Lo que quiero que suceda es que cuando un usuario hace clic en una casilla de verificación para 'tick' es, ninguna fila li que no son controlados son fadedOut (cambio de opacidad) y luego las filas que tienen la clase que coincide con el valor de la casilla de verificación son resaltador (color de fondo cambia a amarillo).

Así por ejemplo, si se hizo clic en el grupo 3, los temas 4 y 6 se destacó. Entonces, si se ha hecho clic grupo 2 artículo 3 se pone de relieve (punto 4 y 6 permanecerían resaltado). Si el grupo 2 se marcó un-punto 3 se convertiría desvanecido, aunque el punto 4 y 6 permanecerían resaltado.

El código que tengo en este momento es:

$('input').click(function(){
    input = $(this);
    classVal = "." + input.val();
    elements = $(classVal );

    if (input.is(':checked')) {
        elements.css("background-color", "#FFFF00");
    } else {
        elements.css("background-color", "");
    }
});

Este se encarga de la resaltando pero no hace el desvanecimiento de los elementos sin marcar. Sé que puedo cambiar la opacidad usando CSS ( "opacidad", 0.33) o fadeTo ( "lento", 0,33), pero no está seguro de cómo manejar esto en el código y dónde ponerlo.

Si cualquiera de mi otro código puede ser arreglado también, por favor hágamelo saber

Gracias

Answer 1

El código de jQuery:

$('input:checkbox').bind('click', function(){
    var checkedClasses = $("input:checked").map(function() {
        return $(this).val();
    });
    var uncheckedOpacity = (checkedClasses.length == 0) ? 1.0 : 0.5;
    $('ol li').css({opacity: uncheckedOpacity, backgroundColor: 'transparent'});
    $.each(checkedClasses, function(index, value){
        $('.' + value).css({backgroundColor: '#ff0', opacity: 1.0});
    });
});

Este código HTML:

<ol>
    <li class="group1">item 1</li>
    <li class="group1">item 2</li>
    <li class="group2">item 3</li>
    <li class="group3">item 4</li>
    <li class="group1">item 5</li>
    <li class="group3">item 6</li>
<ol>

<form>
    <label><input type="checkbox" value="group1" />group 1</label>
    <label><input type="checkbox" value="group2" />group 2</label>
    <label><input type="checkbox" value="group3" />group 3</label>
</form>

Answer 2

$('input').click(function(){
 input = $(this);
 classVal = "." + input.val();
 elements = $(classVal );

 if (input.is(':checked')) {
     elements.css("background-color", "#FFFF00");
     elements.css("opacity", 1);
 } else {
     elements.css("background-color", "");
     elements.css("opacity", 0.33);
 }
});

¿Qué hay de eso? Sólo tiene que añadir otra attr CSS a los elementos.

Answer 3

Tal vez me falta algo, pero ¿por qué no lo puso justo después de la línea que cambia el color de fondo?

$('input').click(function(){
    input = $(this);
    classVal = "." + input.val();
    elements = $(classVal );

    if (input.is(':checked')) {
        elements.css("background-color", "#FFFF00");
        elements.fadeTo("slow", 1.0);
    } else {
        elements.css("background-color", "");
        elements.fadeTo("slow", 0.33);
    }
});

Answer 4

En un principio también desea que los no seleccionados li elementos que se desvanecieron. Para este propósito es necesario utilizar cada función (). Por favor intenta lo siguiente. He comprobado el código y se está trabajando muy bien.

$('input').click(function() {

            $('input').each(function(index) {

                input = $(this);
                classVal = "." + input.val();
                elements = $(classVal);

                if (input.is(':checked')) {
                    elements.css("background-color", "#FFFF00");
                    elements.fadeTo("slow", 1.0);

                } else {
                    elements.css("background-color", "");
                    elements.fadeTo("slow", 0.33);
                }
            });
        });