jQuery選擇帶有toggleClass的所有復選框

Question

我看到了其他示例，但沒有成功使它正常運行。 我所看到的示例也只是使用常規復選框。 我使用了一個類來用Sprite表對復選框進行樣式化，因此在將這些其他示例的思想應用於我的案例時遇到了一些麻煩。

這是標記：

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

checkd屬性是使用CSS類更改子畫面的內容。

input[type=checkbox].pinToggles:checked + label.css-label {
background-position: 0 -16px;
}

大多數功能用於其他功能，但我想以防萬一。

這是我設置各個復選框的方式：

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

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

我要尋找的是典型的全選復選框功能，如果選中該復選框，則全部選中，如果取消選中，則全部取消選中，而且如果在選中全選時單擊復選框，則選中全選，然后單擊選中的復選框取消選中，反之亦然。 我確實看過以下示例： jQuery“全選”復選框，但是很難使它工作。 謝謝您的幫助！

Answer 1

1）使用change事件處理程序，而不是click checkbox和radio按鈕。

您可以像這樣簡單

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

2）我僅在下面的checkbox刪除了class和onclick事件處理程序。

HTML：

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

檢查這個JSFiddle