<html>
<head>
<script type='text/javascript' src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#handle').click(function(){
if($(this).attr('checked')==true){
$('.toggle').attr('checked','true');
}
else{
$('.toggle').removeAttr('checked');
}
});
$('.toggle').click(function(){
if($('.toggle:checked').length==$('.toggle').length){
$('#handle').attr('checked','true');
}
else{
$('#handle').removeAttr('checked');
}
});
});
</script>
<style type='text/css'>
ul{
background-color:#ccc;
list-style:none;
margin 20px auto;
}
li{
padding:10px;
}
</style>
</head>
<body>
<ul>
<li>
<input type='checkbox' id='handle'>
<label for='handle'>
<strong> Toggle ALL</strong></label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> aaaaaaa</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> bbbbbbb</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> cccccccc</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> ddddddd</label>
</li>
</ul>
</body>
</html>