多个复选框，检查是否都在Jquery中检查

Question

我有六个复选框。

显示为这样

Checkbox1 <input type="checkbox" id="check1"> 

Checkbox2 <input type="checkbox" id="check2"> 

<div id="checkbox1field" {if $blabla} style="display="none"{/if}> 
Checkbox1 <input type="checkbox" id="check3"> 
Checkbox2 <input type="checkbox" id="check4"> 
</div> 

<div id="checkbox2field" {if $blabla2} style="display="none"{/if}> 
Checkbox1 <input type="checkbox" id="check5"> 
Checkbox2 <input type="checkbox" id="check6"> 
</div> 

，如果我现在就点击复选框以id=check1与id=checkbox1field元素应该显示如果display="none"。

如果我点击id="check3"id="check4"应该隐藏。

如果我点击id="check4"id="check3"应该隐藏。

相同的过程也适用于id="checkbox2field"。

但我的问题是，如果用户点击

id="check2" and id="check1" 

我做了什么。然后我想，无论id="checkbox2field"和id="checkbox1field"应该显示。

我做了哪些工作50％是在这里

$("#check1:checked").show("fast").("#check4").show("fast").("#checkbox2field").hide("fast"); 
$("#check2:checked").show("fast").("#check1").hide("fast").("#checkbox1field").show("fast"); 

如何解决使用jQuery这个问题呢？

Answer 1

$('#check1,#check2').bind('change', function() { 
    var self = $(this); 

    $('#' + self.attr('id') + 'field').toggle(self.attr('checked')).children(':checkbox').show(); 
}); 

$('#check3,#check4,#check5,#check6').bind('change', function() { 
    var self = $(this); 

    self.siblings(':checkbox').toggle(self.attr('checked')); 
}); 

你可能想要把类适用于你的复选框，使选择更容易。

Answer 2

试图做到这一切所有在一个巨大的jQuery链注定要比它的价值更混乱。

这里有一个简单，直接的方法：

if ($('#check1').is(':checked')) { 
    if ($('#check2').is(':checked')) { 
     $('#checkbox1field').show('fast'); 
     $('#checkbox2field').show('fast'); 
    } else { 
     $('#checkbox1field').hide('fast'); 
    } 
} else if ($('#check2').is(':checked')) { 
    $('#checkbox2field').hide('fast'); 
}