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

更新时间：2022-06-24 23:46:35
<!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>
上一篇 : ：memcache 安装及操作下一篇 : PHP利用 JSON 将XML转换为数组
jquery全选,全不选,反选,获取选择框的值

相关阅读

推荐文章
