zoukankan      html  css  js  c++  java
  • jquery复选框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    
    <script type="text/javascript" src="jquery所有版本/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
    
    	//全选-全不选
    	$("#all").change(function (){
    		$("input[type=checkbox]").prop("checked",$("#all").is(":checked"));
    	
    	});
    	//反选
    	$("#reverse").click(function (){
    		var count = 0;
    		var size = $("input[name=che]").size();
    		//alert(size);
    		$("input[name=che]").each(function (){
    			if(this.checked){
    				$(this).prop("checked",false);
    			}else{
    				count++;
    				$(this).prop("checked",true);
    			}
    			
    		});
    		if(count == size){
    			$("#all").prop("checked",true);
    		}else{
    			$("#all").prop("checked",false);
    		}
    	});
    
    	
    });
    
    function setSelect(obj){
    	//alert(obj.checked)
    	if(obj.checked){
    		//需要判断被选中的复选框个数
    		var count = 0;
    		$(":checked").each(function (){
    			count++;
    		});
    		if(count < $("input[name=che]").size()){
    			$("#all").prop("checked",false);
    		}else{
    			$("#all").prop("checked",true);
    		}
    		
    	}else{
    		$("#all").prop("checked",false);			
    	}
    	
    	
    }
    
    </script>
    
    
    </head>
    <body>
    <input type="checkbox" id="all"> 全选
    <input type="button" value="反选" class="btn" id="reverse"> 
    <br />
    <hr />
    <input type="checkbox" name="che" value="1" onclick="setSelect(this)"> 1.时间都去哪儿了<br />
    <input type="checkbox" name="che" value="2" onclick="setSelect(this)"> 2.海阔天空<br />
    <input type="checkbox" name="che" value="3" onclick="setSelect(this)"> 3.真的爱你<br />
    <input type="checkbox" name="che" value="4" onclick="setSelect(this)"> 4.不再犹豫<br />
    <input type="checkbox" name="che" value="5" onclick="setSelect(this)"> 5.光辉岁月<br />
    <input type="checkbox" name="che" value="6" onclick="setSelect(this)"> 6.喜欢妳<br />
    <hr />
    <br />
    
    </body>
    </html>
    

      

  • 相关阅读:
    熟练使用有棱有角的内存
    计算机进行小数运算时出错的原因
    数据是用二进制数表示的
    代码之外的功夫
    运行库实现
    系统调用与API
    运行库
    内存
    Windows下的动态链接
    Sharding-JDBC 实现垂直分库水平分表
  • 原文地址:https://www.cnblogs.com/toLife/p/4588858.html
Copyright © 2011-2022 走看看