jquery获取radio，checkbox,select的选中的值

最新推荐文章于 2023-04-23 14:44:16 发布

jattxgt

最新推荐文章于 2023-04-23 14:44:16 发布

阅读量245

点赞数

分类专栏： html 文章标签： radio checkbox select

本文链接：https://blog.csdn.net/qq_38555490/article/details/89946525

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<form action="#" method="">
			<!-- 单选按钮 -->
			<!-- 在radio 添加label标签，for属性关联radio的id，我们点击文字的时候也可以选中 -->
			<label for="radio1">男</label>
			<input type="radio" name="radio" id="radio1" value="男"/>
			<label for="radio2">女</label>
			<input type="radio" name="radio" id="radio2" value="女" checked="checked"/><br/>
			
			<!-- 复选框 -->
			<!-- 在checkbox 添加label标签，for属性关联checkbox的id，我们点击文字的时候也可以选中 -->
			<label for="yuwen">语文</label>
			<input type="checkbox" name="hy" id="yuwen" value="语文" checked="checked"/>
			<label for="shuxue">数学</label>
			<input type="checkbox"  name="hy" id="shuxue" value="数学" checked="checked"/>
			<label for="yingyu">英语</label>
			<input type="checkbox" name="hy" id="yingyu" value="英语"/><br />
			
			<!-- 下拉列表 -->
			<select id="course">
				<option value="java">java</option>
				<option selected="selected" value="android">android</option>
				<option value="php">php</option>
				<option value="c">c</option>
			</select>
		</form>
		<p id="p1"></p>
		<p id="p2"></p>
		<p id="p3"></p>
		<script>
			$(function(){
				
				//jq获取单选框的值
				var pro=$("input:radio[name='radio']:checked").val();
				$("#p1").html(pro);
				
				//jq获取复选框
				 var hang=[];
				$("input:checkbox[name='hy']:checked").map(function(){
					hang.push($(this).val());
				});
				var hys=hang.join("——");
				$("#p2").html(hys); 
				
				
				//jq获取下拉列表的值
				var course=$("#course").val();
				$("#p3").html(course);
				
				
				
			})
		</script>
	</body>
</html>

图示：