JS全选反选

效果图

方法一——————————————————————————————————————————————————————

<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>