zoukankan      html  css  js  c++  java
  • js实现全选和反选功能

    1.页面

    <html>
    
    <head><title>导出excel</title><head>
    
    <body>
    
    <p style="text-align:center; padding-top:15px"> 
    
    选择班级:
    
    <select name="claId" id="claId" style="color:#999999">  
    
      <option value="0" style="color:#999999">==选择==</option>  
    
        <option value=1 style="color:#000000">药学1班</option> 
    
        <option value=2 style="color:#000000">药学2班</option>  
    
    </select>
    
    </p>
    
    <p></p>
    
    <p style="text-align:center; padding-top:15px">  选择需要导出的选项:</br>
    
       <input type="checkbox" name="stu" id="a" value="考生学号">考生学号&nbsp;&nbsp; 
    
      <input type="checkbox" name="stu" id="a" value="考生姓名">考生姓名</br> 
    
      <input type="checkbox" name="stu" id="a" value="考生班级">考生班级&nbsp;&nbsp; 
    
      <input type="checkbox" name="stu" id="a" value="考生性别">考生性别</br> 
    
      <input type="checkbox" name="stu" id="a" value="考试得分">考试得分&nbsp;&nbsp;
    
      <input type="checkbox" name="stu" id="a" value="测试时间">测试时间</br> 
    
      <input type="checkbox" name="stu" id="a" value="交卷时间">交卷时间&nbsp;&nbsp; 
    
      <input type="checkbox" name="stu" id="a" value="考试用时">考试用时</br>
    
    </p>
    
    <p style="text-align:center; padding-top:15px">  
    
      <input type="button" value="全选" onclick="allSelectType();"/>  
    
      <input type="button" value="反选" onclick="invertSelectType();"/>
    
    </p>
    
    </body>
    
    </html>

    2.相关的js代码

    //反选
    
    function invertSelectType()
    
    { 
    
    //这里重写反选和全选方法,因为再次使用原先的会导致页面上的选项也会被选  
    
      var ids=$("input[name='stu']");
    
       for(var i=0;i<ids.length;i++)
    
      {  
    
         if(ids[i].checked==true)
    
        {    
    
          ids[i].checked="";   
    
        }else{   
    
           ids[i].checked="checked";  
    
        }  
    
      }
    
    }
    
    //全选
    
    function allSelectType()
    
    {  
    
      var ids=$("input[name='stu']");  
    
      for(var i=0;i<ids.length;i++)
    
      {   
    
        ids[i].checked="checked";  
    
      }
    
    }
  • 相关阅读:
    prometheus对硬盘的监控指标
    zabbix高级用法-Zabbix Tags获取到对应的触发器的核心代码段
    Confluence rest api接口
    zabbix官方模板库
    路由追踪程序Traceroute分析与科普
    C语言进制之间转换
    ubuntu挂载目录在windows10下权限问题
    C语言之原码、反码和补码
    centos下软件的安装与卸载
    PHP设计模式
  • 原文地址:https://www.cnblogs.com/shenliang123/p/2225162.html
Copyright © 2011-2022 走看看