操作单选按钮和复选框

javaScript小主

于 2019-11-20 20:19:41 发布

阅读量174

点赞数

本文链接：https://blog.csdn.net/qq_45683093/article/details/103170684

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作单选按钮和复选框</title>
		<script src="jss/jquery-1.3.2.min.js" type="text/javascript"></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>