jquery 全选和反选

转载

mob6047570116b7 2014-08-12 21:02:00

文章标签 全不选 html javascript d3 jquery 文章分类 MySQL 数据库

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>apsliyuan</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=gbk">
    </head>
    <script language="JavaScript" src="../js/jquery-1.3.1.js">
    </script>
     
    <script language="JavaScript" src="apsliyuan.js">
    </script>
    <body>
        您的爱好很广泛!!!
        <br>
        <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
        <br>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="游泳"/>游泳
        <input type="checkbox" name="items" value="唱歌"/>唱歌
        <br>
        <input type="button" name="checkall" id="checkall" value="全选" />
        <input type="button" name="checkall" id="checkallNo" value="全不选" />
        <input type="button" name="checkall" id="check_revsern" value="反选" />
    </body>
</html>

$(document).ready(function(){    //全选
    $("#checkall").click(function(){
        $("input[name='items']").each(function(){
            this.checked = true;
        });
    });
     
    $("#checkallNo").click(function(){   //全不选
        $("input[name='items']").each(function(){
            this.checked = false;
        })
    });
     
    $("#check_revsern").click(function(){   //反选
        $("input[name='items']").each(function(){
            if (this.checked) {
                this.checked = false;
            }
            else {
                this.checked = true;
            }
        });
    });
     
    $("#checkItems").click(function(){   //全选/全不选
        $("input[name='items']").each(function(){
            if (this.checked) {
                this.checked = false;
            }
            else {
                this.checked = true;
            }
        });
    });
});