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，则可以看到。和.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
})

演示：Fiddle

Answer 2

请注意，使用复选框，用户可以选择多个选项！

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

Answer 3

演示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()
    }
})

}）

选中复选框时如何使类可见

5 个答案: