jQuery复选框-全选、全不选

来源：互联网发布：软件安装app 编辑：程序博客网时间：2024/05/17 04:22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>练习-复选框</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!-- 记得引入jquery-1.11.3.js文件到js目录下 -->    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>    <style type="text/css">    body{    font-family: "Microsoft YaHei";    text-align: center;    }    #mainDiv {    width: 100%;    text-align: center;    margin-top:10px;    }    </style>    <script type="text/javascript">     /*To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method. 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()*/    $(document).ready(function(){    //1. 全选/全不选    $("#all").click(function(){    //分析： 子复选框状态，与父复选框状态一致    // 1.1 获取当前复选框状态    var flag = this.checked;  // this 是dom元素    // 1.2 选取子复选框，设置状态（父复选框状态）    //$(":checkbox[name='course']").attr("checked",flag);    $(":checkbox[name='course']").prop("checked",flag);    });        //2. 反选    $("#btn1").click(function(){    $(":checkbox[name='course']").each(function(){    //2.1 获取当前选中状态    var flag = $(this).prop("checked");    //2.2 反选    $(this).prop("checked", !flag);    });        clickCourse();    });    //3.将选中的设置为没有选中    $("#btn2").click(function(){    $(":checkbox[name='course']:checked").each(function(){    //this.checked = false;    $(this).prop("checked", false);    });        clickCourse();    });        //4. 将没有选中的设置为选中    $("#btn3").click(function(){    $(":checkbox[name='course']:not(:checked)").each(function(){    //this.checked = true;    $(this).prop("checked", true);    });        clickCourse();    });        //5. 给子复选框添加事件    // 当选中的子复选框长度 == 子复选框总长度， 父复选框选中；     // 否则，父复选框取消选中    $(":checkbox[name='course']").click(clickCourse);        // 点击每一个自复选框，判断是否选择父复选框    function clickCourse(){    if ($(":checkbox[name='course']:checked").length == $(":checkbox[name='course']").length) {    $("#all").prop("checked",true);    }else{    $("#all").prop("checked",false);    }    }    });    </script>  </head>    <body>    <div id="mainDiv">    <p>itcast学科选择：<input type="checkbox" name="courseAll" id="all"><label for="all">全选/全不选</label></p>    <input type="checkbox" name="course" value="Java" id="java" >    <label for="java">Java</label>    <input type="checkbox" name="course" value="IOS" id="ios" >    <label for="ios">IOS</label>    <input type="checkbox" name="course" value="Android" id="android" >    <label for="android">Android</label>    <input type="checkbox" name="course" value=".Net" id="net" >    <label for="net">.Net</label>    <input type="checkbox" name="course" value="PHP" id="php" >    <label for="php">PHP</label>    <input type="checkbox" name="course" value="网页平面" id="ui" >    <label for="ui">网页平面</label>   </div>   <br><br>   <hr>   <input type="button" id="btn1" value="反选">   <input type="button" id="btn2" value="将选中的设置为没有选中">   <input type="button" id="btn3" value="将没有选中的设置为选中">  </body></html>
0 0