• Javascript 全选反选


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
     <title></title>
    </head>
    <body>
     
     <table id="mytable">
      <tr>
       <td>选中</td>
       <td>编号</td>
       <td>姓名</td>
       <td>空白</td>
      </tr>
      <tr>
       <td><input type="checkbox" /></td>
       <td>2</td>
       <td>张三</td>
       <td><input type="" /></td>
      </tr>
      <tr>
       <td><input type="checkbox" /></td>
       <td>3</td>
       <td>李四</td>
       <td><input type="" /></td>
      </tr>
      <tr>
       <td><input type="checkbox" /></td>
       <td>5</td>
       <td>王五</td>
       <td><input type="" /></td>
      </tr> 
     </table>
     
      <input type="checkbox" onclick="check(this)"/>全选
      <input type="checkbox"  onclick="fanxuan();return false"/>反选
      <!-- 在这里加return fasle是让其自己的按钮一真不被选中 -->
     <script type="text/javascript">
      
      var checks=document.getElementById("mytable").getElementsByTagName("input");
       
      function  check(obj){
       //判断自己是否被选中 
       //alert(obj.checked);
       //如果当自己选中的时候,则全部选中
        //alert(checks.length);
       for(var i=0;i<checks.length;i++){
        if(checks[i].type=="checkbox"){
         checks[i].checked=obj.checked;
         //等于全选的状态
         //或者用
         //checks[i].checked=true;是让他自己选中
        }
       }
      }
      
      function fanxuan(){
       for(var i=0;i<checks.length;i++){
        
        if(checks[i].type=="checkbox"){
         checks[i].checked=!checks[i].checked;
        }
       }
      }
      
     </script>
    </body>
    </html>

    作者:Wicub
    免责声明:文章、笔记等仅供分享、探讨、参考等学习之用,因此造成的任何后果概不负责。(如有错误、疏忽等问题,欢迎指正、讨论,谢谢)
    本文版权归作者和博客园共有,欢迎转载,但请务必在文章页面明显位置给出原文连接,谢谢配合。
  • 相关阅读:
    docker2核 elasticsearch卡死
    spring cloud config
    App网关Zuul
    spring Ribon
    spring Feign声明式服务消费(Ribbon Hystrix )
    spring Hystrix
    spring cloud 整体介绍
    springbean 生命周期
    xml六种解析方式
    jdk8中的forEach使用return执行下一次遍历
  • 原文地址:https://www.cnblogs.com/wicub/p/3123047.html
Copyright © 2020-2023  润新知