简单的jQuery CheckAll/UncheckAll复选框
我有这个jQuery:简单的jQuery CheckAll/UncheckAll复选框
$(document).ready(function() {
$('#masterChecks input[type="checkbox"]').click(function() {
var togClass=$(this).attr('class');
if($(this).attr('checked')){
//need to make sure all checkboxes for this class is checked, when the
//master checkbox is checked.
$('div.' + togClass).css("display", "inline-block");
}
else
{
//need to make sure all checkboxes for this class is unchecked, when the
//master checkbox is checked.
$('div.' + togClass).css("display", "none");
}
});
});
我有很多div和许多类的Html。有很多复选框。现在我正在检查mastercheckbox,它将隐藏与复选框具有相同类的所有属性的css。我也有一组本地复选框,它们的作用相同,但仅用于它们所在的div。我希望Jquery在未选中的情况下取消选中相同类的本地checbox,反之亦然。下面是HTML struccture
<div id="masterChecks">
// checbox here with class="sampleclass"
</div>
<div class="sampleclass">
//local checkbox here
</div>
看起来很简单的,但不能让它的工作,
香港专业教育学院尝试了一些这样的事情:
谁能帮助?
可以使用jQuery函数.is()检查复选框的状态,然后使用.each()功能cicle并与同一类设置所有的复选框的状态到主的一个:
$('#masterChecks input[type="checkbox"]').click(function(){
var checkclass= $(this).attr('class');
if($(this).is(':checked'))
$('div.' + checkclass + ' input[type="checkbox"]').each(function(){
$(this).attr('checked', true);
});
else
$('div.' + checkclass + ' input[type="checkbox"]').each(function(){
$(this).attr('checked', false);
});
});
编辑: 增加的工作代码的jsfiddle:http://jsfiddle.net/CFeam/2/
这里有sytax错误吗? – user1338194 2012-07-20 11:22:49
对不起,我现在修好了 – kawashita86 2012-07-20 11:41:06
对我不起作用谢谢虽然 – user1338194 2012-07-20 11:49:32
的尝试:
$('#masterChecks input[type="checkbox"]').click(function(){
var yourClass = $(this).attr('class');
if($(this).is(':checked'))
{
$('div.' + yourClass + ' input[type="checkbox"]').each(function(){
$(this).attr('checked', true);
});
}
else
{
$('div.' + yourClass + ' input[type="checkbox"]').each(function(){
$(this).attr('checked', false);
});
}
});
只需更换您的文档准备功能:
$(document).ready(function() {
$('#masterChecks input[type="checkbox"]').click(function() {
var togClass=$(this).attr('class');
$(togClass).click(function(){
if($('#masterChecks').is(':checked'){
$('div.' + togClass).css("display", "inline-block");
$(togClass).each(function(){
$(this).attr('checked','checked');
});
}else{
$('div.' + togClass).css("display", "none");
$(togClass).each(function(){
$(this).removeAttr('checked');
});
}
});
});
});
他们改变了它的Attr( '检查',真); – Kao 2012-07-20 10:14:30