jQuery实现全选取消反选

来源：互联网发布：全国各大高校校花知乎编辑：程序博客网时间：2024/06/05 20:03
<!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>
1 0