表单嵌套表格与全选/不选

<!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>空白jQuery</title>
           <style type="text/css">
/*class用来给checkbox加背景颜色*/
               .col {
                   background-color: yellow;
               }
           </style>
       </head>

<table border="1px yellow solid" cellspacing="0px" cellpadding="20px">
                       <thead id="thead">
                           <tr>
                               <th><input type="checkbox" id="check" /></th>
                               <th>姓名</th>
                               <th>年龄</th>
                               <th>性别</th>
                               <th>班级</th>
                           </tr>
                       </thead>
                       <tbody id="tbody">

                       </tbody>
                   </table>
               </form>
                   </div>
           </body>
               <script type="text/javascript" src="kong/jquery.js"></script>
               <script>
//每次点击保存按钮表单的val插到表格里

               var oBtn1 = $("#btn1");
               var tbody = $("#tbody");
               var oQuan = $("#check");
               oBtn1.on("click",function(){

//每次点保存都让全选按钮变为不选中
$("#check").prop("checked",false);

//把表单的值拿到插到表格里
                   var tr = $("<tr></tr>");
                   var td0 = $("<td>" + "<input type='checkbox' class='chck'/>" + "</td>");
                   var td1 = $("<td>" + $("#name").val() + "</td>");
                   var td2 = $("<td>" + $("#age").val() + "</td>");
                   var td3 = $("<td>" + $("#sex").val() + "</td>");
                   var td4 = $("<td>" + $("#clazz").val() + "</td>");

tbody.append(tr);
tr.append(td0).append(td1).append(td2).append(td3).append(td4);

//全选按钮事件,点击全选下面的CheckBox全选中,反之全不选
oQuan.on("click",function(){

                       for(var i=0; i < $(".chck").length; i++){
                           if(oQuan.prop("checked")==true){
                               $(".chck")[i].checked=true;
                               $(".chck").parent().parent().addClass("col");

                           }else{
                               $(".chck")[i].checked=false;
                               $(".chck").parent().parent().removeClass("col");
                           }
                       }

                   })

//下面的复选框变色
               tbody.on("click",".chck",function(){
                   if($(this).prop("checked")==true){
                           $(this).parent().parent().addClass("col");
                       }else{
                           $(this).parent().parent().removeClass("col");
                   }

//创建一个计数器统计CheckBox的个数
               var number = 0;
               for (var j = 0; j < $(".chck").length;j++) {
                   if ($(".chck")[j].checked==true) {
                       number++;
                   }
               }
//如果个数等于CheckBox的长度执行
               if(number == $(".chck").length){
                   $("#check").prop("checked",true)
               }else{
                   $("#check").prop("checked",false)
               }
               })

})

</script>
</html>

表单嵌套表格与全选/不选

猜你喜欢