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";  
    
      }
    
    }
  • 相关阅读:
    前端CSS部分知识整理
    css随笔记(持续更新)
    前端样式脚本本地化开发
    样式脚本本地化开发方法①【前端开发技巧】
    微信公众号吸粉简易新策略(自整理持续待更新)
    Wave
    无聊时百度了一下自己的名字。吓到我了
    Java实现 LeetCode 819 最常见的单词(暴力)
    Java实现 LeetCode 819 最常见的单词(暴力)
    Java实现 LeetCode 823 带因子的二叉树(DP)
  • 原文地址:https://www.cnblogs.com/shenliang123/p/2225162.html
Copyright © 2011-2022 走看看