全选与反选按钮的实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <script> //删除确认 function del(){ if(!window.confirm('是否要删除数据??')) return false; } //全部选择/取消 function chek(){ var leng = this.form1.chk.length; if(leng==undefined){ leng=1; if(!form1.chk.checked) document.form1.chk.checked=true; else document.form1.chk.checked=false; }else{ for( var i = 0; i < leng; i++) { if(!form1.chk[i].checked) document.form1.chk[i].checked = true; else document.form1.chk[i].checked = false; } } return false; } </script> </head> <body> <form name="form1" id="form1" method="post" action="deletes.php"> <tr> <td > </td> <td >昵称</td> <td >内容</td> <td >联系方式</td> <td >创建时间</td> <td >操作</td> </tr> <hr> <tr> <input type=checkbox name='chk[]' id='chk' value=""> <td ><a href='#'>修改</a>/<a href='#'>删除</a></td> <input type=checkbox name='chk[]' id='chk' value=""> <td ><a href='#'>修改</a>/<a href='#'>删除</a></td> <input type=checkbox name='chk[]' id='chk' value=""> <td ><a href='#'>修改</a>/<a href='#'>删除</a></td> <input type=checkbox name='chk[]' id='chk' value=""> <td ><a href='#'>修改</a>/<a href='#'>删除</a></td> </tr> <hr> <tr> <td height="25" colspan="7" class="m_td" align="left"> <a href="" onClick="return chek();">全部选择/取消</a> <input type="hidden" name="action" value="delall"> <input type="submit" value="删除选择" onclick = 'return del();'></td> </tr> </form> </body> </html>
全选反选按钮另一种代码写法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选 反选按钮</title> </head> <body> <?php for($i=0;$i<10;$i++){ ?> <input id="chk[<?php echo $i; ?>]" type="checkbox" >测试一下<?php echo $i;?> <br> <?php } ?> <a href=" " onclick=" return allchange(10)">全选</a> <a href=" " onclick=" return overchange(10)">反选</a> </body> </html> <script> function $(id){ return document.getElementById(id); //返回一个被触发的元素对象 } function allchange(tot){ for(i=0;i<tot;i++){ //循环判断复选框 if(!$('chk['+i+']').checked){ //如果复选框没有被选中 $('chk['+i+']').checked = true; //选中复选框 } } return false; } function overchange(tot){ for(i=0;i<tot;i++){ //循环输出复选框 if(!$('chk['+i+']').checked){ //如果复选框没有被选中 $('chk['+i+']').checked = true; //选中复选框 }else{ $('chk['+i+']').checked = false; //否则取消复选框的选择 } } return false; } </script>
