zoukankan      html  css  js  c++  java
  • 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
    免责声明:文章、笔记等仅供分享、探讨、参考等学习之用,因此造成的任何后果概不负责。(如有错误、疏忽等问题,欢迎指正、讨论,谢谢)
    本文版权归作者和博客园共有,欢迎转载,但请务必在文章页面明显位置给出原文连接,谢谢配合。
  • 相关阅读:
    啥是IOC ?啥是DI ?
    Spring是什么?
    Javaweb实训-宠物医院-社区宠物医院登陆页面
    Javaweb实训-宠物医院-社区宠物医院的页面样式
    Bootstrap基础学习(二)
    Bootstrap基础学习(一)
    常用的几种清除float浮动的方法
    jquery的each遍历方法
    正则总结RegExp
    OpenWrt编译到底脚本
  • 原文地址:https://www.cnblogs.com/wicub/p/3123047.html
Copyright © 2011-2022 走看看