夏日博客

A-A+

jquery实现全选、反选、全不选 jquery+php实现勾选数据批量删除

2016年08月29日 前端设计 暂无评论 阅读 6 views 次

做项目需要做个全选，反选的功能，是要批量生成保单的，只可惜前段时间刚学到的js已经完全忘光了，只能从网上去找解决方案了，还好找到一款jquery的全选，反选与全不选的功能，正拿用到项目上面。

jquery实现全选、反选、全不选 同时点击批量删除将选中数据的id post给php ，php对数据库进行操作实现数据的批量删除，demo仅供参考 有写的不好的地方欢迎提出，谢谢！

index.html:

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>js/jquery+swf实现的点击复制到剪贴板</title>  
  5. <script type="text/javascript" src="jquery.min.js"></script>  
  6. <script type="text/javascript">  
  7. $(function(){  
  8.     //选中全部  
  9.     $('.selectAll').click(function(){  
  10.         $('#dataList').find('tr').each(function(){  
  11.             $(this).find(':checkbox').attr('checked',true);  
  12.         });  
  13.     });  
  14.     //反选  
  15.     $('.revSelectAll').click(function(){  
  16.         $('#dataList').find('tr').each(function(){  
  17.             if($(this).find(':checkbox').attr('checked')){  
  18.                 $(this).find(':checkbox').attr('checked',false);  
  19.             }else{  
  20.                 $(this).find(':checkbox').attr('checked',true);  
  21.             }  
  22.         });  
  23.     });  
  24.     //全不选  
  25.     $('.delSelectAll').click(function(){  
  26.         $('#dataList').find('tr').each(function(){  
  27.             $(this).find(':checkbox').attr('checked',false);  
  28.         });  
  29.     });  
  30.     //删除选中数据处理  
  31.     $('#form').submit(function(){  
  32.         if (!confirm("是否确认删除所选商品, 删除后不可恢复"))  {  
  33.             return false;  
  34.         }  
  35.         var gid = '';  
  36.         $(':checkbox').each(function(){  
  37.             if($(this).attr('checked')){  
  38.                 var id = $(this).val();  
  39.                 gid += id+','  
  40.             }  
  41.         });  
  42.         gid = gid.substring(0,gid.length-1);  
  43.         $('[name=gid]').val(gid);  
  44.         return true;  
  45.     });  
  46. })  
  47. </script>  
  48. </head>  
  49. <body>  
  50. <table id="dataList" width="50%" height="252" border="1" cellpadding="0" cellspacing="0">  
  51.   <tr>  
  52.     <th scope="col">操作</th>  
  53.     <th scope="col">ID</th>  
  54.     <th scope="col">Name</th>  
  55.     <th scope="col">Sn</th>  
  56.     <th scope="col">Order</th>  
  57.   </tr>  
  58.   <tr>  
  59.     <td><input type="checkbox" name="gid[]" value="1" /></td>  
  60.     <td>1</td>  
  61.     <td>test1</td>  
  62.     <td>0001</td>  
  63.     <td>1</td>  
  64.   </tr>  
  65.   <tr>  
  66.     <td><input type="checkbox" name="gid[]" value="2" /></td>  
  67.     <td>2</td>  
  68.     <td>test2</td>  
  69.     <td>0002</td>  
  70.     <td>2</td>  
  71.   </tr>  
  72.   <tr>  
  73.     <td><input type="checkbox" name="gid[]" value="3" /></td>  
  74.     <td>3</td>  
  75.     <td>test3</td>  
  76.     <td>0003</td>  
  77.     <td>3</td>  
  78.   </tr>  
  79.   <tr>  
  80.     <td><input type="checkbox" name="gid[]" value="4" /></td>  
  81.     <td>4</td>  
  82.     <td>test4</td>  
  83.     <td>0004</td>  
  84.     <td>4</td>  
  85.   </tr>  
  86.   <tr>  
  87.     <td><input type="checkbox" name="gid[]" value="5" /></td>  
  88.     <td>5</td>  
  89.     <td>test5</td>  
  90.     <td>0005</td>  
  91.     <td>5</td>  
  92.   </tr>  
  93.   <tr>  
  94.     <td><input type="checkbox" name="gid[]" value="6" /></td>  
  95.     <td>6</td>  
  96.     <td>test6</td>  
  97.     <td>0006</td>  
  98.     <td>6</td>  
  99.   </tr>  
  100.   <tr>  
  101.     <td><input type="checkbox" name="gid[]" value="7" /></td>  
  102.     <td>7</td>  
  103.     <td>test7</td>  
  104.     <td>0007</td>  
  105.     <td>7</td>  
  106.   </tr>  
  107.   <tr>  
  108.     <td><input type="checkbox" name="gid[]" value="8" /></td>  
  109.     <td>8</td>  
  110.     <td>test8</td>  
  111.     <td>0008</td>  
  112.     <td>8</td>  
  113.   </tr>  
  114.   <tr>  
  115.     <td><input type="checkbox" name="gid[]" value="9" /></td>  
  116.     <td>9</td> //xiariboke.net  
  117.     <td>test9</td>  
  118.     <td>0009</td>  
  119.     <td>9</td>  
  120.   </tr>  
  121.   <tr>  
  122.     <td colspan="5"><a href="javascript:void(0)" class="selectAll" >全选</a> / <a href="javascript:void(0)" class="revSelectAll" >反选</a>  / <a href="javascript:void(0)" class="delSelectAll">全不选</a></td>  
  123.   </tr>  
  124.   <tr>  
  125.     <td colspan="5">  
  126.       <form action="index.php" id="form" method="post">  
  127.           <input type="hidden" name="action" value="del" />  
  128.           <input type="hidden" name="gid" value="" />  
  129.           <input type="submit" value="删除选中数据" />  
  130.       </form>  
  131.     </td>  
  132.   </tr>  
  133. </table>  
  134. </body>  
  135. </html>  

index.php:

  1. <?php  
  2. if(isset($_POST['action']) && $_POST['action'] == 'del'){  
  3.     echo $_POST['gid'];  
  4.     //根据id删除数据库数据  
  5. }  
  6. ?>  

文章来源：http://www.yuhaisong.com/178.html

标签：

给我留言