jQuery练习题三 _Web前端

jQuery练习三

ex-3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
		<script type="text/javascript">
			
			$(document).ready(function(){
				
				//全选
				$("#CheckedAll").click(function(){
					$(":checkbox[name='items']").attr("checked", "checked") ;
				}) ;
				
				//全不选
				$("#CheckedNo").click(function(){
					$(":checkbox[name='items']").attr("checked", false) ;
				}) ;
				
				//反选
				$("#CheckedRev").click(function(){
					$(":checkbox[name='items']").each(function(){
						$(this).attr("checked", !$(this).attr("checked")) ;
					}) ;
				}) ;
				
				//提交
				$("#send").click(function(){
					$(":checkbox[name='items']:checked").each(function(){
						alert($(this).val()) ;
					}) ;
				}) ;
				
				//全选的第二种方式
				$("#checkedAll_2").click(function(){
					$(":checkbox[name='items']").attr("checked", $(this).attr("checked")) ;
					
					$(":checkbox[name='items']").click(function(){
						$("#checkedAll_2").attr("checked", ($(":checkbox[name='items']").length ==
												$(":checkbox[name='items']:checked").length)) ;
					}) ;
				}) ;
			
		});
		</script>
	</head>
	<body>
		<form method="post" action="">
		   	你爱好的运动是？<input type="checkbox" id="checkedAll_2"/>全选
		   	<br/>
		    <input type="checkbox" name="items" value="足球"/>足球
			<input type="checkbox" name="items" value="篮球"/>篮球
			<input type="checkbox" name="items" value="羽毛球"/>羽毛球
			<input type="checkbox" name="items" value="乒乓球"/>乒乓球
		   	<br/>
		    <input type="button" id="CheckedAll" value="全　选"/>
		    <input type="button" id="CheckedNo" value="全不选"/>
		    <input type="button" id="CheckedRev" value="反　选"/> 
		
			<input type="button" id="send" value="提　交"/> 
		</form>
	</body>
</html>