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

    xiaoxiao2021-03-25  10

    <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+"' οnclick='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" οnclick="selectAll('checkbox')" value="全选"/> <button id="getval">创建表</button> <button οnclick="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" οnclick="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之后的,

    转载请注明原文地址: https://ju.6miu.com/read-149675.html

    最新回复(0)