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

      

    
    
  • 相关阅读:
    CodeForces 626 DIV.2 D Present
    PageRank 算法初步了解
    LeetCode 329. Longest Increasing Path in a Matrix(DFS,记忆化搜索)
    LeetCode 312. Burst Balloons(DP)
    LeetCode Contest 180
    用js来实现那些数据结构12(散列表)
    用js来实现那些数据结构11(字典)
    用js来实现那些数据结构10(集合02-集合的操作)
    用js来实现那些数据结构09(集合01-集合的实现)
    用js来实现那些数据结构08(链表02-双向链表)
  • 原文地址:https://www.cnblogs.com/sysg/p/6496823.html
Copyright © 2011-2022 走看看