zoukankan      html  css  js  c++  java
  • 全选与反选按钮的实现

    <!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>

     

  • 相关阅读:
    ASP+Access UTF-8 网页乱码问题解决办法
    使用PowerDesigner生成Access数据库
    crontab详解
    Pending Statistics
    Recovery with Incremental Backups
    ASP的Global.asa使用说明
    cocos基础教程(5)数据结构介绍之cocos2d::Map<K,V>
    cocos基础教程(5)数据结构介绍之cocos2d::Vector
    cocos基础教程(4)基础概念介绍
    cocos进阶教程(1)Lua调用自定义C++类和函数的最佳实践
  • 原文地址:https://www.cnblogs.com/kangshuai/p/5179587.html
Copyright © 2011-2022 走看看