全选、全不选、反选

最新推荐文章于 2023-10-23 14:09:15 发布

Cool_xiaocao

最新推荐文章于 2023-10-23 14:09:15 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jQuery HTML ViewUI

本文链接：https://blog.youkuaiyun.com/Cool_xiaocao/article/details/83843319

jQuery 专栏收录该内容

5 篇文章

订阅专栏


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

[img]http://dl.iteye.com/upload/attachment/433427/298a3243-9e35-33cc-a8ef-8883058e209f.gif[/img]