• 全选与反选按钮的实现


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

     

  • 相关阅读:
    程序打包(通过VS2015插件 InstallShield2015 Limited Edition 方式)
    QSS单独设置四个边角
    Qt 设置窗口圆角
    Qt实现鼠标拖动窗口
    关于split切割的几种情况
    java开发过程中,报错Dangling meta character '*' near index 0,解决办法
    关于ArrayList的contains方法
    WPS文档按回车键不能换行怎么解决
    正则表达式截取数字
    如何用hibernate中查询出一个表数量总数
  • 原文地址:https://www.cnblogs.com/kangshuai/p/5179587.html
Copyright © 2020-2023  润新知