jquery全选,全不选,反选,获取选择框的值-阿里云开发者社区

开发者社区> 开发与运维> 正文

jquery全选,全不选,反选,获取选择框的值

简介: <!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"> <meta charset='
<!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">
<meta charset='utf-8'/>
<head>
    <title>全选,不全选,反选</title>
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
</head>
<body>
<ul id="list">   
   <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li> 
   <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li> 
   <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li> 
   <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li> 
   <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li> 
   <li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<input type="button" value="全选" class="btn" id="selectAll">   
<input type="button" value="全不选" class="btn" id="unSelect">   
<input type="button" value="反选" class="btn" id="reverse">   
<input type="button" value="获得选中的所有值" class="btn" id="getValue"> 
</body>
<script type="text/javascript">
$(document).ready(function(){
    //全选或全不选 
    $("#all").click(function(){
        if(this.checked){
            $("input[type=checkbox]").prop("checked",true);   
        }else{    
            $("input[type=checkbox]").prop("checked",false); 
        }    
     });  
    //全选   
    $("#selectAll").click(function () { 
         $("#list :checkbox,#all").prop("checked", true);   
    });   
    //全不选 
    $("#unSelect").click(function () {   
         $("#list :checkbox,#all").prop("checked", false);   
    });   
    //反选  
    $("#reverse").click(function () {  
         $("#list :checkbox").each(function () {   
              $(this).prop("checked", !$(this).prop("checked"));   
         }); 
         allchk(); 
    }); 
     
    //设置全选复选框 
    $("#list :checkbox").click(function(){ 
        allchk(); 
    }); 
  
    //获取选中选项的值 
    $("#getValue").click(function(){
		str = '';
		n = '';
        $("#list :checkbox").each(function(){
			if(this.checked){
				str = str + n + $(this).val();
				n = ',';
			}
        });
		alert(str);
    }); 




})


function allchk(){ 
    var chknum = $("#list :checkbox").size();//选项总个数 
    var chk = 0; 
    $("#list :checkbox").each(function () {   
        if($(this).attr("checked")==true){ 
            chk++; 
        } 
    }); 
    if(chknum==chk){//全选 
        $("#all").attr("checked",true); 
    }else{//不全选 
        $("#all").attr("checked",false); 
    } 
}

</script>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章