您的位置:首页 > Web前端 > javascript > 正文

脚本实现checkbox的全选和反选

更多 时间:2013-8-23 类别:Web前端 浏览量:587

脚本实现checkbox的全选和反选

脚本实现checkbox的全选和反选

js实现全选和反选功能

1.页面

  •  
  • HTML 代码   复制
  • <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代码

  •  
  • JScript 代码   复制
  • //反选
    
    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";  
    
      }
    
    }
    		
  • jquery实现全选和反选功能

    1、页面

  •  
  • HTML 代码   复制
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <title>apsliyuan</title>
            <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
            <meta http-equiv="description" content="this is my page">
            <meta http-equiv="content-type" content="text/html; charset=gbk">
        </head>
        <body>
            您的爱好很广泛!!!
            <br>
            <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
            <br>
            <input type="checkbox" name="items" value="足球" />足球
            <input type="checkbox" name="items" value="篮球"/>篮球
            <input type="checkbox" name="items" value="游泳"/>游泳
            <input type="checkbox" name="items" value="唱歌"/>唱歌
            <br>
            <input type="button" name="checkall" id="checkall" value="全选" />
            <input type="button" name="checkall" id="checkallNo" value="全不选" />
            <input type="button" name="checkall" id="check_revsern" value="反选" />
        </body>
    </html>
    		
  • 2、脚本的实现

  •  
  • JScript 代码   复制
  • 
      $(document).ready(function(){
        $("#checkall").click(function(){
            $("input[name='items']").each(function(){
                this.checked = true;
            });
        });
        
        $("#checkallNo").click(function(){
            $("input[name='items']").each(function(){
                this.checked = false;
            })
        });
        
        $("#check_revsern").click(function(){
            $("input[name='items']").each(function(){
                if (this.checked) {
                    this.checked = false;
                }
                else {
                    this.checked = true;
                }
            });
        });
        
        $("#checkItems").click(function(){
            $("input[name='items']").each(function(){
                if (this.checked) {
                    this.checked = false;
                }
                else {
                    this.checked = true;
                }
            });
        });
    
     
    标签:js jquery checkbox