JQuery实现全选全不选效果

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script language="JavaScript" src="../js/jquery-1.4.2.js">
        </script>
    </head>
    <body>
        <form method="post" action="">
            <br>
            <br>
            <br>
            &nbsp;&nbsp;<input type="checkbox" name="items" value="足球"/>足球
            &nbsp;&nbsp;<input type="checkbox" name="items" value="篮球"/>篮球
            &nbsp;&nbsp;<input type="checkbox" name="items" value="游泳"/>游泳
            &nbsp;&nbsp;<input type="checkbox" name="items" value="唱歌"/>唱歌
            <br/>
            <br/>
            <br>
            <input type="checkbox" id="myCheck"/>全选/全不选
            <br/>
            <br/>
            <input type="button" id="CheckedAll" value="全 选"/><input type="button" id="CheckedNo" value="全不选"/><input type="button" id="CheckedRev" value="反 选"/>
        </form>
    </body>
    <script language="JavaScript">
        //全选/全不选
        $("#myCheck").click(function(){
            if (this.checked) {
                $("input[name='items']").attr("checked", "checked");
            }
            else {
                $("input[name='items']").attr("checked", null);
            }
        });
        //全 选
        $("#CheckedAll").click(function(){
            $("input[name='items']").attr("checked", "checked");
        });
        //全不选
        $("#CheckedNo").click(function(){
            $("input[name='items']").attr("checked", null);
        });
        //反 选
        $("#CheckedRev").click(function(){
            $("input[name='items']").each(function(index, domElem){
           
                if (this.checked) {
                    $(domElem).attr("checked", null);
                }
                else {
                    $(domElem).attr("checked", "checked");
                }
            });
        });
    </script>
</html>

你可能感兴趣的:(JQuery实现全选全不选效果)