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高级编程day14 笔记
    [转]ubuntu下gcc的安装与使用
    MySQL主从复制(Replication for Backup)
    Zabbix(2,添加主机,监控项)
    jumpserver for C7一步一步安装
    MySQL:创建、修改和删除表
    NOT EXISTS替代NOT IN 和 EXISTS替换DISTINCT 识别‘低效执行’的SQL语句
    ie6、ie7下JSON.parse JSON未定义的解决方法
    CentOS6.4编译源码安装mysql5.0.41
    获取客户端IP并判断内外网
  • 原文地址:https://www.cnblogs.com/sysg/p/6496823.html
Copyright © 2011-2022 走看看