Jquery для выделения элементов в списке

Question

У меня есть старый список:

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

и набор флажков, соответствующих именам классов

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

То, что я хочу, - это когда пользователь нажимает нафлажок, чтобы отметить его, любые строки li, которые не отмечены, являются fadedOut (изменить непрозрачность), а затем любые строки, класс которых соответствует значению флажка, выделяются цветом (цвет фона меняется на желтый).

Так, например, если щелкнуть группу 3, будут выделены пункты 4 и 6.Затем, если щелкнуть группу 2, пункт 3 будет выделен (пункты 4 и 6 останутся выделенными).Если бы группа 2 не была отмечена галочкой, пункт 3 исчез бы, хотя пункты 4 и 6 оставались бы выделенными.

Код, который у меня есть на данный момент:

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

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

Это обрабатываетвыделение, но не делает исчезновение непроверенных элементов.Я знаю, что могу изменить непрозрачность, используя css («непрозрачность», 0.33) или fadeTo («медленный», 0.33), но не уверен, как справиться с этим в коде и где его разместить.

Если любой другой мой код можно привести в порядок, пожалуйста, дайте мне знать

Спасибо

Answer 1

$('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);
 }
});

Как насчет этого? Просто добавьте еще один атрибут CSS к элементам.

Answer 2

Код 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});
    });
});

Этот 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 3

Может быть, я что-то упускаю, но почему бы просто не поставить это сразу после строки, которая меняет цвет фона?

$('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

Изначально вы также хотите, чтобы невыбранные элементы li были выцветшими Для этого вам нужно использовать функцию each (). Пожалуйста, попробуйте следующее. Я проверил этот код, и он работает нормально.

$('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);
                }
            });
        });