jQuery選擇所有複選框與toggleClass

我已經看到了這個的其他例子，但沒有成功地得到這個正常工作。我見過的例子也只是使用普通的複選框。我已經使用一個類來設置複選框的樣式，因此在將這些其他示例的想法應用到我的案例時遇到了一些麻煩。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>

選中的屬性是什麼樣的變化使用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 "select all" checkbox，但只是很難讓它工作。謝謝您的幫助！

來源

2013-10-14 Fogolicious

這是更接近你在想什麼：http://jsfiddle.net/rXhan/1/？ – Spencer

不是。我希望他們能夠取消單個的選中，即使顯示/隱藏全部選中。真的最好的例子，我可以顯示我想要的是從另一個問題這個小提琴：http：//jsfiddle.net/5XMW4/ – Fogolicious

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）我已刪除了class和onclick事件處理只在下面checkbox。

HTML：

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

入住這JSFiddle

來源

2013-10-14 14:50:04 Praveen

但是，如果您檢查所有個別複選框，然後檢查顯示/隱藏所有它顯示與其應該的相反。它應該是當選擇全部選中，如果他們取消選中一個框選擇全部未選中。 – Fogolicious

@Fogolicious檢查這個小提琴http://jsfiddle.net/keTft/1/ – Praveen

和以前一樣。嘗試檢查所有三個單獨的複選框，以便它們被檢查。然後點擊全選。它不檢查所有的個人，它不應該。顯示我想要發生的最好的例子是這個小提琴，這是從我看到的另一個問題http://jsfiddle.net/5XMW4/ – Fogolicious

jQuery選擇所有複選框與toggleClass

回答

相關問題