jQuery实现全选取消反选

阅读更多

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

你可能感兴趣的:(jquery,html)