Show/Hide 使用一个复选框全部或切换多个 div

Question

如果这个话题有点过头，请见谅。我已经阅读了很多帖子，但还没有完全找到我要找的东西，这就是我问的原因。

我想要一个显示 "Show All" 的复选框，当您选中它时会显示多个 div。当您取消选中它时，divs 隐藏

我能够 show/hide 一个 div 使用复选框的 id，但我不确定如何使用 class 元素，所以我不必写出每个 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');
});

Show/Hide 使用一个复选框全部或切换多个 div

Show/Hide All or Toggle Multiple divs With One Checkbox

javascript

checkbox

jquery

toggle

show-hide