как сделать класс видимым, когда установлен флажок

Question

У меня есть список из 3 разных категорий, и мне нужно, чтобы они были скрыты или видимы в зависимости от того, установлен флажок или нет.

мой HTML

<input type="checkbox" name="option" value="one">One<br> 
<input type="checkbox" name="option" value="two">Two<br> 
<input type="checkbox" name="option" value="three">Three<br> 
<ul> 
    <li class='one'>alpha</li> 
    <li class='two'>beta</li> 
    <li class='three'>gamma</li> 
</ul> 

как бы я получить его так, что, когда флажок Один выбран, только .one видна? и если выбраны One и Two .one и .two видны.

Answer 1

Тогда попробуйте

//dom ready handler 
jQuery(function() { 
    //element and attribute equals selector to select all input elements with name option and register a change event handelr 
    $('input[name="option"]').change(function() { 
     //find the target element using class selector and the changed checkbox's value and then use toggle() to set visibility according to the checked state of the checkbox 
     $('.' + this.value).toggle(this.checked) 
    }).change(); //trigger the change event on page load to set the proper initial values 
}) 

Demo: Fiddle

Answer 2

Имейте в виду, что с флажками, пользователь может выбрать несколько вариантов!

$('ul li').hide(); 
$('input').change(function() { 
    if($(this).prop('checked')) { 
     $('.' + $(this).attr('value')).show(); 
    } else { 
     $('.' + $(this).attr('value')).hide(); 
    } 
}); 

Answer 3

Demo FIDDLE

HTML

<input type="checkbox" class="one" name="option" value="one">One<br> 
<input type="checkbox" class='two' name="option" value="two">Two<br> 
<input type="checkbox" class='three' name="option" value="three">Three<br> 
<ul> 
    <li class='one' style="display:none;">alpha</li> 
    <li class='two' style="display:none;">beta</li> 
    <li class='three' style="display:none;">gamma</li> 
</ul> 

Jquery

$('input[type="checkbox"]').click(function(){ 
$('li.'+$(this).attr('class')).toggle(); 
}); 

Answer 4

Jquery бы этот простой метод, но это может быть сделано с помощью CSS.

NB. Этот метод не является гибким и HTML структура конкретных

Codepen Demo

HTML

<input class='one' type="checkbox" name="option1" value="one">One<br> 
<input class='two' type="checkbox" name="option2" value="two">Two<br> 
<input class='three' type="checkbox" name="option3" value="three">Three<br> 
<ul> 
    <li class='one'>alpha</li> 
    <li class='two'>beta</li> 
    <li class='three'>gamma</li> 
</ul> 

CSS

li { 
    display:none; 
} 

input[type=checkbox].one:checked ~ ul li.one, 
input[type=checkbox].two:checked ~ ul li.two, 
input[type=checkbox].three:checked ~ ul li.three { 
display:block; 
} 

Answer 5

Вы можете сделать это нравится: http://jsfiddle.net/84sAy/

$('input').each(function(){ 
$(this).change(function(checked){ 
console.log() 
    if ($(this)[0].checked) 
{ 
    $("."+$(this).val()).hide() 
} 
    else 
    { 
     $("."+$(this).val()).show() 
    } 
}) 

)