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

      

    
    
  • 相关阅读:
    快速排序最新理解
    八大排序算法
    图的创建
    ARM入门实践(一)----Mini6410上最简单的LED点灯裸机程序
    驱动编程思想之初体验 --------------- 嵌入式linux驱动开发之点亮LED
    嵌入式Linux LED小灯点亮实验
    手算KMP匹配的Next值和Nextval值
    及格率 不谢 cast(cast (sum(case when res>=60 then 1 else 0 end)*100/(count(1)*1.0) as float) as nvarchar)+'%' '及格率'
    Hibernate反向工程生成DAO
    struts2&&Hibernate Demo1
  • 原文地址:https://www.cnblogs.com/sysg/p/6496823.html
Copyright © 2020-2023  润新知