Javascript jQuery使用toggleClass选中所有复选框

我见过其他的例子，但没有成功地让它正常工作。我看到的示例也只是使用常规复选框。我使用了一个类来设置带有精灵表的复选框的样式，因此在理解这些其他示例的思想并将其应用到我的案例中时遇到了一些困难

以下是加价：

<div id="showHideAll"">Show/Hide All<input type="checkbox" id="allCheck" name="pinSet" class="pinToggles" onclick="checkAllLinks()">
    <label for="allCheck" class="css-label"></label></div>
</div>

<div>Opt1<input type="checkbox" id="opt1Check" name="pinSet" class="pinToggles" onclick="checkOpt1Links()">
    <label for="opt1Check" class="css-label"></label>
</div>

<div>Opt2<input type="checkbox" id="opt2Check" name="pinSet" class="pinToggles" onclick="checkOpt2Links()">
     <label for="opt2Check" class="css-label"></label>
</div>

<div>Opt3<input type="checkbox" id="opt3Check" name="pinSet" class="pinToggles" onclick="checkOpt3Links()">
     <label for="dinShopCheck" class="css-label"></label>
</div>

这其中大部分是用于其他功能，但我想我会展示它以防万一

以下是我设置各个复选框的方式：

function checkOpt1Links(){
    $('#opt1 li a').toggleClass("inactive");

 if(opt1.getVisible() == true)
    {       
        opt1.setOptions({visible:false});
    }
    else
    {
        opt1.setOptions({visible:true});
    }
}

我要寻找的是典型的全选复选框功能，如果您选中它，复选框都会选中，如果您取消选中它们都会取消选中，但是如果您在选中“全选”时单击一个框，则选中“全选”和“单击的复选框”会取消选中，反之亦然。我确实看了这个例子：但只是很难让它起作用。谢谢你的帮助

1）使用

change

事件处理程序，而不是

单击
复选框和
单选按钮

你可以这么简单

$('#showHideAll').on('change', 'input[type=checkbox]', function () {
    if ($('.pinToggles').is(':checked')) {
        $('.pinToggles').prop('checked', false)
    }
    else {
    $('.pinToggles').prop('checked', true)
    }
});

2） 我只删除了下面
复选框中的
类和
onclick
事件处理程序

HTML:

<div id="showHideAll">Show/Hide All<input type="checkbox" id="allCheck" name="pinSet" >
    <label for="allCheck" class="css-label"></label></div>
</div>

全部显示/隐藏

选中此项
，但如果选中所有单独的复选框，然后选中“显示/隐藏所有显示内容”，则使用此项。它应该是当全选被选中，如果他们取消选中一个复选框，全选被取消选中。和以前一样。尝试选中所有三个单独的复选框，以便选中它们。然后点击全选按钮。它取消选中所有的个人，而且不应该。展示我想要发生的事情的最好例子是我看到的另一个问题中的小提琴，它更接近你的想法：？不是真的。我希望他们能够取消选中单个选项，即使选中了“全部显示/全部隐藏”。实际上，我能展示我想要的最好的例子是另一个问题中的这把小提琴：
<div id="showHideAll">Show/Hide All<input type="checkbox" id="allCheck" name="pinSet" >
    <label for="allCheck" class="css-label"></label></div>
</div>