JQuery для элементов Hightlight в списке

Question

У меня есть список 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>

и набор флакоментов, которые соответствуют названиям класса

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

Что я хочу случиться, это то, что когда пользователь нажимает на флажок, чтобы «галочка», любые строки Li, которые не проверяются, являются фадидными (изменение непрозрачностью), а затем любые строки, которые имеют класс, который соответствует значению флажков, являются выделенными (Фон цвет изменился на желтый).

Таким образом, например, если нажала группа 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

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

Что об этом? Просто добавьте другую CSS Attr к элементам.

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

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

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