全选与反选按钮的实现 

<!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 >&nbsp;</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> &nbsp;&nbsp;&nbsp;&nbsp;
<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>

 

posted @ 2016-02-03 14:09  骏码信息  阅读(266)  评论(0)  编辑  收藏  举报