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实现全选取消反选</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>

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>

相关推荐