【第六章】操作单选按钮和复选框

最新推荐文章于 2022-05-10 22:57:04 发布

JavaScript豆豆

最新推荐文章于 2022-05-10 22:57:04 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/qq_45695622/article/details/103170190

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作单选按钮和复选框</title>
		<script language="JavaScript" src="js/jquery-1.11.1.min.js"></script>
	</head>
	<body>
		<form>
			<h3 align="center">选择你喜欢的课程</h3>
			<input type="checkbox" name="hobby" value="语文">语文
			<input type="checkbox" name="hobby" value="数学">数学
			<input type="checkbox" name="hobby" value="英语">英语
			<input type="checkbox" name="hobby" value="物理">物理
			<input type="checkbox" name="hobby" value="化学">化学
			<input type="checkbox" name="hobby" value="生物">生物<br/><br/>
			<input type="button" id="checkAll" value="全选">&nbsp;<input type="button" id="unCheckAll" value="全不选">&nbsp;
			<input type="button" id="revBtn" value="反选">&nbsp;<input type="button" id="subBtn" value="提交">&nbsp;
		</form>
		<script>
			$(function(){
				$("#checkAll").click(function(){
					$("input[type=checkbox]").attr("checked",true);
				})
				$("#unCheckAll").click(function(){
					$("input[type=checkbox]").removeAttr("checked");
				})
				$("#revBtn").click(function(){
					$("input[type=checkbox]").each(function(){
						this.checked=!this.checked;
					});
				})
				$("#subBtn").click(function(){
					var msg="你喜欢的课程是：\r\n";
					$("input[type=checkbox]:checked").each(function(){
						msg+=$(this).val()+"\r\n";
					});
					alert(msg);
				})
			})
		</script>
	</body>
<html>