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);
    	}
    }
    

      

    
    
  • 相关阅读:
    Linux下zip命令使用
    docker镜像发布到阿里云镜像仓库
    基于官方镜像定制php-fpm容器
    docker-compose部署开发环境
    docker安装discuz!Q
    从零开始实现简单 RPC 框架 4:注册中心
    从零开始实现简单 RPC 框架 3:配置总线 URL
    从零开始实现简单 RPC 框架 2:扩展利器 SPI
    从零开始实现简单 RPC 框架 1:RPC 框架的结构和设计
    文本分类(六):pytorch实现DPCNN
  • 原文地址:https://www.cnblogs.com/sysg/p/6496823.html
Copyright © 2011-2022 走看看