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

Question

如果这个话题太过分了，请原谅我。我读了很多帖子，但还没有找到我要找的东西，这就是我问的原因。

我想要一个复选框，上面写着“显示全部”，当您选中它时，会显示多个 div。当您取消选中它时，div 会隐藏

我能够使用复选框显示/隐藏一个带有 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？也许有这样的类(class):

<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>

谢谢!

Answer 1

使用.表示class，使用#表示id。

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