您的位置：首页 > 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   
    
 
    
 
    

    

    
              
  • 上一篇：C#中is 运算符与as运算符的区别和作用
    •                 	  
			  
  • 下一篇：jquery如何实现倒计时
    • 

  
     


    
  
    
      您可能感兴趣
    • 首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利