jquery 全选 反选 取消 批量删除

Posted on 2015-06-25 01:02  小蕊同学  阅读(372)  评论(0)    收藏  举报
首选引入jquery
全选
  1. 	//全选
  2.     function myall(){
  3. 		$("input[name='d[]']").each(function(index,e){
  4. 		$(this).prop('checked',true);	
  5. 		});
  6. 	}
取消
  1. 	//当true改为false时为取消
  2. //	   function no(){
  3. //		$("input[name='d[]']").each(function(index,e){
  4. //			$(this).prop('checked',false);
  5. //		});
  6. //	}
  7. 	  function no(){
  8. 		$("input[type='checkbox']").each(function(index,e){
  9. 			$(this).prop('checked',false);
  10. 		});
  11. 	}
反选
  1. 	//反选,取得他的值然后 true 改为这个值取反即可
  2. 	  function bb(){
  3. 		$("input[name='d[]']").each(function(index,e){
  4. 			$(this).prop('checked',!$(this).prop('checked'));
  5. 		});
  6. 	}
新闻管理页面的代码
  1. <?php
  2. include '../inc/db_mysqli.php';
  3. //删除留言信息
  4. if(isset($_GET['del'])){
  5. 	delete('hnsc_guestbook','id='.$_GET['del']);
  6. }
  7. //预处理语句查询数据
  8. $rows=query('hnsc_guestbook');
  9. ?>
  10. <!DOCTYPE html>
  11. <html>
  12.     <head>
  13.     <meta charset="utf-8">
  14.     <title>新闻管理页面</title>
  15.     <meta name="keywords" content="关键字">
  16.     <meta name="description" content="简介">
  17.     <script src="../js/j.js"></script>
  18.     <script>
  19. 	//全选
  20.     function myall(){
  21. 		$("input[name='d[]']").each(function(index,e){
  22. 		$(this).prop('checked',true);	
  23. 		});
  24. 	}
  25. 	//当true改为false时为取消
  26. //	   function no(){
  27. //		$("input[name='d[]']").each(function(index,e){
  28. //			$(this).prop('checked',false);
  29. //		});
  30. //	}
  31. 	  function no(){
  32. 		$("input[type='checkbox']").each(function(index,e){
  33. 			$(this).prop('checked',false);
  34. 		});
  35. 	}
  36. 	//反选,取得他的值然后 true 改为这个值取反即可
  37. 	  function bb(){
  38. 		$("input[name='d[]']").each(function(index,e){
  39. 			$(this).prop('checked',!$(this).prop('checked'));
  40. 		});
  41. 	}
  42.     </script>
  43.  <style>
  44. th {
  45. 	font-size: 14px;
  46. 	letter-spacing: 2px;
  47. 	background-color: #efefef;
  48. 	padding: 15px;
  49. }
  50. tr {
  51. 	background-color: #FFFFFF;
  52. }
  53. td {
  54. 	padding: 10px;
  55. 	text-align:center;
  56. 	font-size:12px;
  57. }
  58. </style>
  59.     </head>
  60.     <body>
  61. <table cellspacing="1" border="0" width="80%" bgcolor="#BFBFBF" align="center">
  62.       <tr bgcolor="#FFFFFF">
  63.     <th><input type="checkbox" onClick="aa(this)"></th>
  64.     <th>公司名称</th>
  65.     <th>留言内容</th>
  66.     <th>性别</th>
  67.     <th>联系电话</th>
  68.     <th>联系人手机号</th>
  69.     <th>地址</th>
  70.     <th>邮箱</th>
  71.     <th>留言时间及ip</th>
  72.     <th>操作</th>
  73.   </tr>
  74. <?php
  75. foreach($rows as $v){
  76. 	?>
  77. 	      <tr>
  78.      <td><input type="checkbox" name="d[]"></td>
  79.      <td><?=$v[1]?></td>
  80.     <td><?=$v[2]?></td>
  81.     <td><?=$v[3]?></td>
  82.     <td><?=$v[5]?></td>
  83.     <td><?=$v[4]?></td>
  84.      <td><?=$v[6]?></td>
  85.     <td><?=$v[7]?></td>
  87.     <td><?=date('Y-m-d H:i:s',$v[8])?><br><br><?=$v[9]?></td>
  88.     <td>
  89.     <a href="?del=<?=$v[0]?>" onClick="return confirm('是否要删除?')">删除</a>
  90.     </td>
  91.   </tr>
  92. <?php
  93. }
  94. ?>
  95. <tr>
  96. <input type="button" value="全选"  onClick="myall()">
  97. <input type="button" value="反选" onClick="bb()">
  98. <input type="button" value="取消" onClick="no()">
  99. <input type="button" value="批量删除" onClick="del()">
  100. </tr>要 
  101. </table>
  102. </body>
  103. </html>
点击标题里面的checkbox 全选 再点击取消
js部分代码
  1. 	//点击头部的checkbox  下面的全选中
  2. function aa(t){
  3. 	var o=document.getElementsByName('d[]');
  4. 	for(i in o){
  5. 		o[i].checked=t.checked;
  6. 	}
  7. }
  8.
html 代码
  1.     <th><input type="checkbox" onClick="aa(this)" ></th>
  2.     <th>公司名称</th>
  1.         <input type="submit" value="批量删除">
全选 反选 取消 批量  删除功能齐全的html 代码
  1. <?php
  2. include '../inc/db_mysqli.php';
  3. //删除留言信息
  4. if(isset($_GET['del'])){
  5. 	delete('hnsc_guestbook','id='.$_GET['del']);
  6. }
  7. //预处理语句查询数据
  8. $currpage=isset($_GET['p']) ? $_GET['p'] : 1;
  9. $rows=pager('hnsc_guestbook',$currpage,'*',10);
  10. css1();
  11. //$rows=query('hnsc_guestbook');
  12. // 控制批量删除
  13. if(isset($_GET['d'])){
  14. 	$yy=$_POST['d'];
  15. 	echo '<pre>';
  16. 	foreach($yy as $vv){
  17. 	    delete('hnsc_guestbook','id='.$vv);
  18. 	}
  19. header('location:guestbookadmin.php?p='.$_GET['p']);
  20. }
  21. ?>
  22. <!DOCTYPE html>
  23. <html>
  24.     <head>
  25.     <meta charset="utf-8">
  26.     <title>新闻管理页面</title>
  27.     <meta name="keywords" content="关键字">
  28.     <meta name="description" content="简介">
  29.      <style>
  30. th {
  31. 	font-size: 14px;
  32. 	letter-spacing: 2px;
  33. 	background-color: #efefef;
  34. 	padding: 15px;
  35. }
  36. tr {
  37. 	background-color: #FFFFFF;
  38. }
  39. td {
  40. 	padding: 10px;
  41. 	text-align:center;
  42. 	font-size:12px;
  43. }
  44. </style>
  45.     <script src="../js/j.js"></script>
  46.     <script>
  47. 	//全选
  48.     function myall(){
  49. 		$("input[name='d[]']").each(function(index,e){
  50. 		$(this).prop('checked',true);	
  51. 		});
  52. 	}
  53. 	//当true改为false时为取消
  54. //	   function no(){
  55. //		$("input[name='d[]']").each(function(index,e){
  56. //			$(this).prop('checked',false);
  57. //		});
  58. //	}
  59. 	  function no(){
  60. 		$("input[type='checkbox']").each(function(index,e){
  61. 			$(this).prop('checked',false);
  62. 		});
  63. 	}
  64. 	//反选,取得他的值然后 true 改为这个值取反即可
  65. 	  function bb(){
  66. 		$("input[name='d[]']").each(function(index,e){
  67. 			$(this).prop('checked',!$(this).prop('checked'));
  68. 		});
  69. 	}
  70. 	//点击头部的checkbox  下面的全选中
  71. function aa(t){
  72. 	var o=document.getElementsByName('d[]');
  73. 	for(i in o){
  74. 		o[i].checked=t.checked;
  75. 	}
  76. }
  77. 	
  78. 	
  79. 	
  80. 	
  81.     </script>
  83.     </head>
  84.     <body>
  85.     <form action="?d=y&p=<?=$currpage?>" method="post">
  86. <table cellspacing="1" border="0" width="80%" bgcolor="#BFBFBF" align="center">
  87.       <tr bgcolor="#FFFFFF">
  88.     <th><input type="checkbox" onClick="aa(this)" ></th>
  89.     <th>公司名称</th>
  90.     <th>留言内容</th>
  91.     <th>性别</th>
  92.     <th>联系电话</th>
  93.     <th>联系人手机号</th>
  94.     <th>地址</th>
  95.     <th>邮箱</th>
  96.     <th>留言时间及ip</th>
  97.     <th>操作</th>
  98.   </tr>
  99. <?php
  100. foreach($rows[0] as $v){
  101. 	?>
  102.     <tr>
  103.     <td><input type="checkbox" name="d[]" value="<?=$v[0]?>"></td>
  104.     <td><?=$v[1]?></td>
  105.     <td><?=$v[2]?></td>
  106.     <td><?=$v[3]?></td>
  107.     <td><?=$v[5]?></td>
  108.     <td><?=$v[4]?></td>
  109.      <td><?=$v[6]?></td>
  110.     <td><?=$v[7]?></td>
  112.     <td><?=date('Y-m-d H:i:s',$v[8])?><br><br><?=$v[9]?></td>
  113.     <td>
  114.     <a href="?del=<?=$v[0]?>" onClick="return confirm('是否要删除?')">删除</a>
  115.     </td>
  116.   </tr>
  117. <?php
  118. }
  119. ?>
  120. <tr>
  121. 	<td colspan="10">
  122.         <input type="button" value="全选"  onClick="myall()">
  123.         <input type="button" value="反选" onClick="bb()">
  124.         <input type="button" value="取消" onClick="no()">
  125.         <input type="submit" value="批量删除">
  126. </tr>
  127. <tr>
  128. 	<td colspan="10">
  129.         <?=$rows[1]?>
  130.         </td>
  131. </tr>
  132. </table>
  133. </form>
  134. </body>
  135. </html>






博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3