首页 文章

显示/隐藏全部或使用一个复选框切换多个div

提问于
浏览
0

如果这个话题过度了,请原谅我 . 我已经阅读了很多帖子并且还没有找到我正在寻找的东西,这就是我要问的原因 .

I want to have one checkbox that says "Show All" and when you check it multiple divs show. When you uncheck it, the divs hide

我能够使用复选框显示/隐藏一个带有id的div,但我不确定如何使用类元素,所以我不必写出每个div id . 这是我使用的代码:

<input type="checkbox" id="checkbox">Show All
<div id="links"><a href="#">Link Title</a></div>

$(document).ready(function () {

    $('#link').hide();


    $('#checkbox').change(function () {
        if (!this.checked) 
        //  ^
           $('#links').fadeOut('slow');
        else 
            $('#links').fadeIn('slow');
    });
});

如何使用javascript处理此问题,以便我可以在一个复选框上单击显示多个div?也许有这样的课:

<input type="checkbox" id="checkbox">Show All
<div class="links"><a href="#">Link Title</a></div>
<div class="links"><a href="#">Link Title</a></div>
<div class="links"><a href="#">Link Title</a></div>

谢谢!

1 回答

  • 1

    class.id# .

    $('.link').hide();
    $('#checkbox').change(function () {
        if (!this.checked) 
        //  ^
           $('.links').fadeOut('slow');
        else 
            $('.links').fadeIn('slow');
    });
    

相关问题