[英]jQuery Select All Checkbox with toggleClass
I have seen other examples of this but have not successfully gotten this to function correctly. 我看到了其他示例,但没有成功使它正常运行。 The examples I have seen also are just using regular checkboxes.
我所看到的示例也只是使用常规复选框。 I have used a class to stylize the checkbox with a sprite sheet so having a bit of trouble taking the ideas of these other examples and applying them to my case.
我使用了一个类来用Sprite表对复选框进行样式化,因此在将这些其他示例的思想应用于我的案例时遇到了一些麻烦。
Here is the mark up: 这是标记:
<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>
The checked property is what changes the sprite using a css class. checkd属性是使用CSS类更改子画面的内容。
input[type=checkbox].pinToggles:checked + label.css-label {
background-position: 0 -16px;
}
Most of this is for other functionality but thought I would show it just in case. 大多数功能用于其他功能,但我想以防万一。
This is how I set up the individual checkboxes: 这是我设置各个复选框的方式:
function checkOpt1Links(){
$('#opt1 li a').toggleClass("inactive");
if(opt1.getVisible() == true)
{
opt1.setOptions({visible:false});
}
else
{
opt1.setOptions({visible:true});
}
}
What I am looking for is the typical select all checkbox functionality, where if you check it the boxes all check, if you uncheck they all uncheck but also if you click a box when select all is checked the select all and the clicked checkbox uncheck and vice versa. 我要寻找的是典型的全选复选框功能,如果选中该复选框,则全部选中,如果取消选中,则全部取消选中,而且如果在选中全选时单击复选框,则选中全选,然后单击选中的复选框取消选中,反之亦然。 I did look at this example: Jquery "select all" checkbox but just having difficult time making it work.
我确实看过以下示例: jQuery“全选”复选框,但是很难使它工作。 Thanks for the help!
谢谢您的帮助!
1) Use change
event handler instead of click
for checkbox
and radio
buttons. 1)使用
change
事件处理程序,而不是click
checkbox
和radio
按钮。
You can make it simple like this 您可以像这样简单
$('#showHideAll').on('change', 'input[type=checkbox]', function () {
if ($('.pinToggles').is(':checked')) {
$('.pinToggles').prop('checked', false)
}
else {
$('.pinToggles').prop('checked', true)
}
});
2) I have removed the class
and onclick
event handler in the below checkbox
only. 2)我仅在下面的
checkbox
删除了class
和onclick
事件处理程序。
HTML: HTML:
<div id="showHideAll">Show/Hide All<input type="checkbox" id="allCheck" name="pinSet" >
<label for="allCheck" class="css-label"></label></div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.