jQuery实现全选取消反选

最新推荐文章于 2019-04-15 18:09:17 发布

zlzhaoe

最新推荐文章于 2019-04-15 18:09:17 发布

阅读量356

点赞数 1

分类专栏： html+css+js 文章标签： jquery html

本文链接：https://blog.csdn.net/u012081441/article/details/71793421

版权

html+css+js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现全选取消反选</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function() {

        //全选
        $(".checkAll").on("click", function() {
            var checked = $(this).prop("checked");
            $(".checkChild").each(function(i) {
                if ($(this).attr("disabled") != "disabled") {
                    $(this).prop("checked", checked);
                }
            });
        });

        //反选
        $(".reverseCheck").on("click", function() {
            $(".checkChild").each(function(i) {
                if ($(this).prop("checked")) {
                    $(this).prop("checked", false);
                } else {
                    $(this).prop("checked", true);
                }
            });
        });

        //取消
        $(".checkChild").click(function() {
            var flag = true;
            $(".checkChild").each(function(i) {
                if (!$(this).prop("checked")) {
                    flag = false;
                }
            });
            if (flag) {
                $(".checkAll").prop("checked", true);
            } else {
                $(".checkAll").prop("checked", false);
            }
        });
    });
</script>
</head>

<body>
    <h5>js实现全选取消</h5>
    <input type="checkbox" name="checkAll" class="checkAll" />全选
    <input type="checkbox" name="reverseCheck" class="reverseCheck" />反选
    <input type="checkbox" name="checkChild" class="checkChild" />语文
    <input type="checkbox" name="checkChild" class="checkChild" />数学
    <input type="checkbox" name="checkChild" class="checkChild" />英语
    <input type="checkbox" name="checkChild" class="checkChild" />地理
</body>
</body>
</html>

zlzhaoe

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现全选取消反选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery实现全
复制链接

扫一扫

专栏目录