[英]jQuery Select All Checkbox with toggleClass
我看到了其他示例,但没有成功使它正常运行。 我所看到的示例也只是使用常规复选框。 我使用了一个类来用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“全选”复选框,但是很难使它工作。 谢谢您的帮助!
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.