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 («opacity», 0.33) или fadeTo («slow», 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.fadeTo("slow", 1.0); 
    } else { 
     elements.css("background-color", ""); 
     elements.fadeTo("slow", 0.33); 
    } 
}); 

Answer 3

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

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

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