jQuery练习三

最新推荐文章于 2022-10-13 09:14:07 发布

syh945

最新推荐文章于 2022-10-13 09:14:07 发布

阅读量119

点赞数

分类专栏： jQuery 文章标签： jQuery HTML ViewUI

本文链接：https://blog.csdn.net/syh945/article/details/83885958

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>