There are a lot of solutions for this, but I found most them did not handle the case where user checked or unchecked all of the child checkboxes and it must automatically checked or unchecked the parent checkbox. so I give the following solution:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
.cbRowItem {display:block;}
</style>
<script type="text/javascript">
$(document).ready(function () {
var cbHeader = $('.cbHeader input:checkbox');
var cbRowItem = $('.cbRowItem input:checkbox');
cbHeader.bind("click", function () {
cbRowItem.attr('checked', $(this).is(':checked') ? 'checked' : '');
});
cbRowItem.bind("click", function () {
cbHeader.attr('checked', cbRowItem.length == $('.cbRowItem :checked').length ? 'checked' : '');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="display:block;">
<asp:CheckBox id="CheckBoxAll" runat="server" class="cbHeader" Text="All"/>
<asp:CheckBox id="CheckBox1" runat="server" class="cbRowItem" Text = "CheckBox 1"/>
<asp:CheckBox id="CheckBox2" runat="server" class="cbRowItem" Text = "CheckBox 2"/>
<asp:CheckBox id="CheckBox3" runat="server" class="cbRowItem" Text = "CheckBox 3"/>
<asp:CheckBox id="CheckBox4" runat="server" class="cbRowItem" Text = "CheckBox 4"/>
</div>
</form>
</body>
</html>