效果图
方法一——————————————————————————————————————————————————————
<script type="text/javascript">
$(document).ready(function () {
//全选框选中时，子项选中
$("#<%=checkAll.ClientID%>").click(function () {
$(":checkbox[id!='<%=checkAll.ClientID%>']").prop("checked", $("#<%=checkAll.ClientID%>").prop("checked"));
});
//所有子项选中时,全选框选中
$(":checkbox[id!='<%=checkAll.ClientID%>']").click(function () {
var length = $(":checkbox[id!='<%=checkAll.ClientID%>']").length;
var checklength = $(":checkbox[id!='<%=checkAll.ClientID%>']:checked").length;
if (length == checklength) {
$("#<%=checkAll.ClientID%>").prop("checked", true);
}
else {
$("#<%=checkAll.ClientID%>").prop("checked", false);
}
})
//点击全选按钮
$("#selectAll").click(function () {
$(":checkbox").prop("checked", true)
})
//点击全不选按钮
$("#unSelect").click(function () {
$(":checkbox").prop("checked", false)
})
//点击反选按钮
$("#reverse").click(function () {
//判断所有的按钮是否已经全选
if ($(":checkbox[id!='checkAll']").length == $(":checkbox[ID!='checkAll']:checked").length) {
$(":checkbox").prop("checked", false);
} else {
$(".mylist").find(":checkbox").each(function () {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
$(":checkbox[id!='<%=checkAll.ClientID%>']").length == $(":checkbox[id!='<%=checkAll.ClientID%>']:checked").length ? $("#<%=checkAll.ClientID%>").prop("checked", true) : $("#<%=checkAll.ClientID%>").prop("checked", false);
}
else {
$(this).prop("checked", true);
$(":checkbox[id!='<%=checkAll.ClientID%>']").length == $(":checkbox[id!='<%=checkAll.ClientID%>']:checked").length ? $("#<%=checkAll.ClientID%>").prop("checked", true) : $("#<%=checkAll.ClientID%>").prop("checked", false);
}
})
}
})
})
</script>
———————————————————————————————————————————————————————
方法二（JQuery较简单，首先引入JQuery）
<script src="jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#CheckedAll").click(function () { //全选
$('[name=items]:checkbox').prop("checked",true);
})
$("#CheckedNo").click(function () { //全不选
$('[name=items]:checkbox').prop("checked",false);
})
$("#CheckedRev").click(function () { //反选
$('[name=items]:checkbox').each(function () {
// $(this).prop("checked", !$(this).prop("checked")); //JQuery的方法
this.checked = !this.checked; //Javascript的Dom方法
})
})
})
</script>
<form id="form1" runat="server">
<input type="checkbox" id="Label1" name="items" value="足球" /><label for="Label1">足球</label>
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<input type="checkbox" name="items" value="羽毛球" />羽毛球 <br />
<input type="button" id="CheckedAll" value="全选" />
<input type="button" id="CheckedNo" value="全不选" />
<input type="button" id="CheckedRev" value="反选" /><br />
</form>
