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>
    

      

  • 相关阅读:
    第三章 第六节 SWT类的常量与函数
    第四章 第一节 概述
    第四章 第四节 使用RowLayout
    第四章 第三节 使用FillLayout
    IIS7下使用4.0框架集成模式URLRewriter重写中文URL乱码问题
    Google Chrome下无法获取标签innerHTML问题
    IIS7.5应用程序池集成模式和经典模式的区别
    IIS使用4.0框架时Request.RawUrl获取问题
    解决iOS与pad里ifram无法滑动问题
    react实现双向绑定
  • 原文地址:https://www.cnblogs.com/toLife/p/4588858.html
Copyright © 2011-2022 走看看