复选框全选/取消全选获得选中的val id 以及删除tr 增加tr 简单详解

来源：互联网发布：淘宝霏慕最出名模特编辑：程序博客网时间：2024/05/28 19:23

<html>
<head>
<style>
table-d table{ background:#F00}
table-d table td{ background:#FFF}
</style>
<script src="jquery.js" ></script>
<script language=javascript>
   var chk = new Array();//array数组
   var count=0;//数组的下表
   var delArr = new Array();//删除的数组
   var delcount =0;//删除的下表
   //默认全选
   function selectAll(name){
   /*复选框选中/全部选jquery1.6推荐*/
       if($("input[name='"+name+"']:checkbox").prop("checked"))
       {
             $("input[name='"+name+"']:checkbox").prop("checked",false);
        }else
       {
            $("input[name='"+name+"']:checkbox").prop("checked",true);
        }
   }
   /*jquery 1.6以下使用*/
      /*复选框选中/全部选
        if($(":checkbox").attr("checked")!="checked"){
            $(":checkbox").attr("checked","checked");
        }else{
            $(":checkbox").removeAttr("checked");
        }
       */
   //删除
   function del(id){
       alert(id);
       alert("数组含有："+chk);
       for(var i=0;i<chk.length;i++){
           if(chk[i]==id){
               chk.splice(i,1);//删除以i 下标的值返回为空
               break;//跳出循环
           }
       }$("#"+id+"").parents("tr").remove();//移除所在行以id为基本
   }
   $(function(){
   //获取值后
   $("#getval").click(function(){
      //jquery获取复选框值
       var chk_value =[];
       $('input[name="checkbox"]:checked').each(function(){
           var userid= $(this).val();
           var id =   $(this).parents("tr").find("td:eq(1)").html();
           var name =   $(this).parents("tr").find("td:eq(2)").html();
           var age=   $(this).parents("tr").find("td:eq(3)").html();
           var password =$(this).parents("tr").find("td:eq(4)").html();
           var address = $(this).parents("tr").find("td:eq(5)").html();
           //追加到 id为app的表格
           $("#app").append("<tr><td><input type='checkbox' name='checkboxs' value='"+userid+"' /></td><td>"+id+"</td><td>"+name+"</td>"+
           "<td>"+age+"</td><td>"+password+"</td><td>"+address+"</td><td><button id='"+userid+"' onclick='del(this.id)'>删除</button></td></tr>");
           chk[count] = $(this).val();//加入数组
           count++;//每当加入玩数据就加1
       });
       //alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value);
       alert(chk.length==0?'没有啊':chk);
   });
       $("#deltable").click(function(){
       var count =0;
       $('input[name="checkbox"]:checked').each(function(){
           if($(this).val()!="" || $(this)!=""){
                   count++;
               }
           });
           if(count!=0){
               if(confirm('确定删除吗?')){
                   $('input[name="checkbox"]:checked').each(function(){
                       var userid= $(this).val();
                       for(var i =0;i<chk.length;i++){
                           if(chk[i]==userid){
                               chk.splice(1,1);i-1;
                           }
                       }
                       $(this).parents("tr").remove();//移除所在行以id为基本
                       delArr[delcount] = userid;//删除加进来方便记录
                       delcount++;//删除count次数下表
                   });
                   alert("您本次删除了"+count+"列");
               }
           }
       });
})

   function create(){
   /*如果你想用ajax 传递数组*必须把数组遍历为数组方便后台调用*/
       var id_s =[];
       for(var i=0;i<chk.length;i++){
           if(chk[i]==""|| typeof(chk[i]=="undefined")){//判断是不是为空的是的就删掉
               chk.splice(i,1);i-1;
               alert("成功删掉一个");
           }
           id_s[i]=chk[i];
       }
       alert(chk.length);
   }

</script>
</head>
<body>
<input type="button" name="select" onclick="selectAll('checkbox')" value="全选"/>
<button id="getval">创建表</button>
<button onclick="create()">提交</button>
<table style="background:#F00;" id="sss" border="1">
   <tr><th>/</th><th>id</th><th>name</th><th>age</th><th>password</th><th>address</th></tr>
   <tr>
       <td><input type="checkbox" name='checkbox' value=1 /></td>
       <td>1</td>
       <td>jack</td>
       <td>11</td>
       <td>123</td>
       <td>南京</td>
   </tr>
   <tr>
       <td><input type="checkbox" name='checkbox' value=2 /></td>
       <td>2</td>
       <td>tom</td>
       <td>12</td>
       <td>password</td>
       <td>上海</td>
   </tr>
   <tr>
       <td><input type="checkbox" name='checkbox' value=3 /></td>
       <td>3</td>
       <td>ff</td>
       <td>13</td>
       <td>password</td>
       <td>深圳</td>
   </tr>
   <tr>
       <td><input type="checkbox" name='checkbox' value=4 /></td>
       <td>zz</td>
       <td>name</td>
       <td>33</td>
       <td>password</td>
       <td>北京</td>
   </tr>
   <tr>
       <td><input type="checkbox" name='checkbox' value=5 /></td>
       <td>5</td>
       <td>ff</td>
       <td>123</td>
       <td>1234</td>
       <td>长沙</td>
   </tr>
</table>
<button id="deltable">全部删除</button>
<table id="app">
</table>
<button id="btn" onclick="show()">显示</button>
<div class="panel" id="div" style="display:none; position: absolute;width:500px;height: 500px;z-index: 3">
   <div id="dialog" title="用户设备选择">
   aaaaaaaa
   </div>
</div>
</body>
</html>

具体代码自己去测试，有什么不懂留贴！！！！搞了几十分钟的这玩意了！！

还有jquery1.6后全选有问题，搞了一个小时网上找的我就放在下面

        //默认全选
   function selectAll(name){
   /*复选框选中/全部选*/
       if($("input[name='userbox']:checkbox").prop("checked")){
              $("input[name='userbox']:checkbox").prop("checked",false);
       }else{
           $("input[name='userbox']:checkbox").prop("checked",true);
       }
   }

上面的是1.6之前用的，这是1.6之后的，

0 0

复选框全选/取消全选 获得选中的val id 以及删除tr 增加tr 简单详解

复选框全选/取消全选获得选中的val id 以及删除tr 增加tr 简单详解