zoukankan      html  css  js  c++  java
  • jQuery实现复选框的全选、反选功能

    <ul id="list">  
       <li><label><input type="checkbox" value="1">text</label></li>
       <li><label><input type="checkbox" value="2">text</label></li>
       <li><label><input type="checkbox" value="3">text</label></li>
       <li><label><input type="checkbox" value="4">text</label></li>
       <li><label><input type="checkbox" value="5">text</label></li>
       <li><label><input type="checkbox" value="6">text</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">
    

      jquery代码

    $(function () {
    	//全选或全不选
    	$("#all").click(function(){   
        	if(this.checked){   
            	$("#list :checkbox").prop("checked", true);  
        	}else{   
    		$("#list :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(){
    		var valArr = new Array;
            $("#list :checkbox[checked]").each(function(i){
    			valArr[i] = $(this).val();
            });
    		var vals = valArr.join(',');
          	alert(vals);
        });
    }); 
    function allchk(){
    	var chknum = $("#list :checkbox").size();//选项总个数
    	var chk = 0;
    	$("#list :checkbox").each(function () {  
            if($(this).prop("checked")==true){
    			chk++;
    		}
        });
    	if(chknum==chk){//全选
    		$("#all").prop("checked",true);
    	}else{//不全选
    		$("#all").prop("checked",false);
    	}
    }
    

      

    
    
  • 相关阅读:
    计数器应用-数据清洗案例
    Map Join实战案例
    Reduce Join实战案例
    自定义OutputFormat代码实现
    Golang的序列化-RPC和GRPC
    jetty服务器的安装和部署、新增到开机启动服务
    myeclipse不编译解决方法
    MyEclipse从数据库反向生成实体类之Hibernate方式 反向工程
    MyEclipse自动生成hibernate实体类和配置文件攻略
    eclipse从数据库逆向生成Hibernate实体类
  • 原文地址:https://www.cnblogs.com/sysg/p/6496823.html
Copyright © 2011-2022 走看看