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

回答

相关问题