jquery checkbox全选删除

最新推荐文章于 2018-10-16 18:54:55 发布

小白的成长之路_

最新推荐文章于 2018-10-16 18:54:55 发布

阅读量502

点赞数

本文链接：https://blog.csdn.net/XiaoZhuang__/article/details/78717787

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
   </head>
   <body>
       用户:<input type="text" id="name"/>
       密码:<input type="text" id="pwd"/>
       邮箱:<input type="text" id="em"/>
       <input type="button" id="btn" value="添加" />
       <table id="ta" border="1px" cellpadding="0px" cellspacing="0px">
          <tr>
             <th><input type="checkbox" id="cb" /></th>
             <th>用户名</th>
             <th>密码</th>
             <th>邮箱</th>
             <th>操作</th>
          </tr>
       </table>
       <input type="button" id="pl" value="批量删除" />
       <script type="text/javascript">
             $("#btn").click(function(){
                   $("table").show();
                   var na=$("#name").val();
                   var pwd=$("#pwd").val();
                   var em=$("#em").val();
                   $("#ta").append("<tr><td><input type='checkbox'/></td><td>"+na+"</td><td>"+pwd+"</td><td>"+em+"</td><td><input type='button' value='删除' οnclick='f(this)'/></td></tr>");
             });
             function f(a){
                  $(a).parent().parent().remove();
                   var v= $("table td");
                  if(v.length==0){
                        $("table").hide();
                  }
             }
             var flag=true;
             $("#cb").click(function(){
                   var a= $("#cb").is(":checked");
                   var c=$(":checkbox");
                   /*if(a){
                      c.each(function(){
                          $(this).prop("checked",a);
                      });
                   }else{
                      c.each(function(){
                          $(this).prop("checked",a);
                      });
                   }*/
                  c.each(function(){
                          $(this).prop("checked",flag);
                      });
                      flag=!flag;
             });

             $("#pl").click(function(){
                   var f=0;
                   var a=$(":checkbox");
                   a.each(function(q,w){
                      if(q!=0){
                          if($(this).is(":checked")){
                          $(this).parent().parent().remove();
                          f++;
                      }

                   }
                 });
                  var v= $("table td");
                  if(v.length==0){
                        $("table").hide();
                     c.prop("checked",false);
              }
              if(f==0){
                 alert("至少选择一行");
              }
             });
       </script>
   </body>
</html>