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>

　　

posted @ 2015-06-19 15:34  活下去  阅读(212)  评论(0)    收藏  举报