Toggle Checkbox Groups in jQuery
Toggle groups of checkboxes, no matter what their names or values are.
HTML
<fieldset>
<button class="checkbox_group">Animals (pt 1)</button>
<div>
<label><input type="checkbox" name="animal[]" value="Dog" /> Dog</label>
<label><input type="checkbox" name="animal[]" value="Cat" /> Cat</label>
<label><input type="checkbox" name="animal[]" value="Horse" /> Horse</label>
<label><input type="checkbox" name="animal[]" value="Spider" /> Spider</label>
</div>
</fieldset>
<fieldset>
<button class="checkbox_group">Animals (pt 2)</button>
<div>
<label><input type="checkbox" name="animal[]" value="Fish" /> Fish</label>
<label><input type="checkbox" name="animal[]" value="Lion" /> Lion</label>
<label><input type="checkbox" name="animal[]" value="Hyena" /> Hyena</label>
</div>
</fieldset>
<fieldset>
<button class="checkbox_group">Grades</button>
<div>
<label><input type="checkbox" name="grade[]" value="A" /> A</label>
<label><input type="checkbox" name="grade[]" value="B" /> B</label>
<label><input type="checkbox" name="grade[]" value="C" /> C</label>
<label><input type="checkbox" name="grade[]" value="D" /> D</label>
<label><input type="checkbox" name="grade[]" value="E" /> E</label>
<label><input type="checkbox" name="grade[]" value="F" /> F</label>
</div>
</fieldset>
CSS
body{margin: 0;}
label {
display: block;
cursor: pointer;
}
fieldset {
margin: 0 0 20px 0;
}
div {
margin: 0 0 0 20px;
}
footer{
background: #ff0;
border: 0 none;
border-top: 1px solid #000;
bottom: 0;
color: #000;
padding: 10px;
position: fixed;
width: 100%;
}
JavaScript
$('.checkbox_group').toggle(function () {
$('input', this).attr('checked', 'checked');
$(this).next().find('input[type="checkbox"]').attr('checked', 'checked');
}, function () {
$('input', this).removeAttr('checked');
$(this).next().find('input[type="checkbox"]').removeAttr('checked');
});