全选、全不选、反选 -

LvMax

浏览: 141981 次
性别:
来自: 江门

最近访客更多访客>>

lsdkln

sunrie

guixin

一起半醉巴黎

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

全选、全不选、反选

博客分类：

jQuery

jQuery HTML

<script src="js/jquery1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            //获取"足球"、"篮球"、"乒乓球"、"羽毛球"这些checkbox
            var chk = $("[name=items]:checkbox");
            //选中状态设置为false
            chk.attr("checked", false);
            $("#chkAll").attr("checked", false);
            //全选/全不选
            $("#chkAll").click(function() {
                //方法一
                //if (this.checked) {
                //chk.attr("checked", true);
                //}
                // else {
                //chk.attr("checked", false);
                //}
                //方法二
                chk.attr("checked", this.checked);
            });
            chk.click(function() {
                var flag = true;
                chk.each(function() {
                    if (!this.checked) {
                        flag = false;
                    }
                });
                $("#chkAll").attr("checked", flag);
            });
            //全选
            $("#selAll").click(function() {
                chk.attr("checked", true);
            });
            //全不选
            $("#selNone").click(function() {
                chk.attr("checked", false);
            });
            //反选
            $("#selInver").click(function() {
                chk.each(function() {
                    $(this).attr("checked", !$(this).attr("checked"));
                    //利用Javascript原生的Dom方法实现反选功能
                    //this.checked = !this.checked;
                });
            });
        });
    </script>

<body>
    你喜欢的运动是 :
    <input type="checkbox" id="chkAll" />全选/全不选
    <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" id="selAll" value="全选" />
    <input type="button" id="selNone" value="全不选" />
    <input type="button" id="selInver" value="反选" />
    <input type="button" id="send" value="提交" />
</body>