js全选反选code（jquery版）

js全选反选code：需要引用jquery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //全选
            $("#chkAll").click(function () {
                $(":checkbox[id*=Child]").attr("checked", $("#chkAll").attr("checked"));
            })

            //选子的checkbox判断全选的状态
            $(":checkbox[id*=Child]").click(function () {
                singleCheck();
            })

            //反选
            $(":button[value=反选]").click(function () {
                $(":checkbox[id*=Child]").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"))
                })

                singleCheck();
            })
        })


        function singleCheck() {
            //假设所有的checkbox都被选中
　　　　　　　　var isCheckAll = true;
            　$(":checkbox[id*=Child]").each(function () {
                //如果有一个没被选中
　　　　　　　　　if (!$(this).attr("checked")) {
                    isCheckAll = false;
                    //1.return true 相当于 continue；
　　　　　　　　　　　 //2.return false 相当于 break。
　　　　　　　　　　return false;
                }
            })
            //设置全选的状态
            $("#chkAll").attr("checked", isCheckAll);
         }
    </script>
</head>
<body>
    <input id="chkAll" type="checkbox" />全选
    <input type="button" value="反选" />

    <br />

    爱好：<br />
    <input id="chkChild0" type="checkbox" />吃饭<br />
    <input id="chkChild1" type="checkbox" />睡觉<br />
    <input id="chkChild2" type="checkbox" />打豆豆<br />
</body>
</html>



posted @ 2012-02-18 11:07  JesseLZJ  阅读(269)  评论(0)  编辑  收藏  举报