用jQuery选择器的方式来获取元素

最新推荐文章于 2023-04-25 10:49:25 发布

小丸子i

最新推荐文章于 2023-04-25 10:49:25 发布

阅读量781

点赞数 2

文章标签： jQuery

本文链接：https://blog.csdn.net/qq_41139281/article/details/80514038

版权

需求说明：点击“查看我选择的爱好”按钮，在下方显示已选择的爱好，代码如下图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h3>选择你的爱好：</h3>
		<ul>
			<li><input type="checkbox" value="音乐" />音乐</li>
			<li><input type="checkbox" value="登山" />登山</li>
			<li><input type="checkbox" value="游泳" />游泳</li>
			<li><input type="checkbox" value="阅读" />阅读</li>
			<li><input type="checkbox" value="打球" />打球</li>
			<li><input type="checkbox" value="跑步" />跑步</li>
			<li><input type="checkbox" value="其他" />其他</li><br />
			<li><input type="button" value="查看我选择的爱好" /></li>
		</ul>
		<p id="text"></p>
	</body>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script>
		$(document).ready(function() {
			//查看我的爱好
			$("input[type='button']").click(function() {
				//获取所有checkbox
				var str = "";
				$("input[type='checkbox']:checked").each(function() {
					str += $(this).val() + "<br/>";
					$("#text").html(str);
				});
			});
		})
	</script>
</html>