js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图

最新推荐文章于 2024-06-06 23:30:25 发布

a_靖

最新推荐文章于 2024-06-06 23:30:25 发布

阅读量1.2w

点赞数 4

分类专栏： JS Web前端文章标签： js多选框 js复选框 js获取用户选择的多选框复选框中的值并保 js单选框 js下拉菜单

本文链接：https://blog.csdn.net/qq_35713752/article/details/78542787

版权

Web前端同时被 2 个专栏收录

399 篇文章 24 订阅

订阅专栏

186 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<title>单选框,复选框,下拉菜单简单示例</title>
	</head>

	<body>
		<p>单选框示例: (选择性别)</p>
		<!--单选框-->
		男:<input id='radio_1' type='radio' value='男' name='test1' checked='checked' onchange="demo1(id,value)" />
		女:<input id='radio_2' type='radio' value='女' name='test1' onchange="demo1(id,value)" />
		<script type="text/javascript">
			function demo1(id,value) {
				alert('我的id是:'+id + '    我的性别是:'+value) //会打印出用户选中的单选框的id
			}
		</script>
		
		<hr />
		<p>多选框示例: (考试多选答案)</p>
		<!--多选框-->
		<form name="form1" method="post" action="">
			<input type="checkbox" name="r" value="a">a.我是答案1<br>
			<input type="checkbox" name="r" value="b">b.我是答案2<br>
			<input type="checkbox" name="r" value="c">c.我是答案3<br>
			<input type="checkbox" name="r" value="d">d.我是答案4<br>
			<br>
			<input type="button" onclick="demo2()" value="提交答案">
		</form>
		<script language="javascript">
			function demo2() {
				var arr = [];
				var r = document.getElementsByName("r");
				for(var i = 0; i < r.length; i++) {
					if(r[i].checked) {
						arr.push(r[i].value);
					}
				}
				alert('我选择的答案是:'+arr)
			}
		</script>
		
		<hr />
		<p>下拉菜单示例: (选择优惠卷)</p>
		<!--下拉菜单-->
		<select class="" id="self_select" onchange="demo3()">
			<option>选择优惠券</option>
			<foreach name="list" item="v">
				<option value="优惠卷1">优惠卷1</option>
				<option value="优惠卷2">优惠卷2</option>
				<option value="优惠卷3">优惠卷3</option>
			</foreach>
		</select>
		<script type="text/javascript">
			//下拉框内容选择
			function demo3() {
				var city_area = $("#self_select").find("option:selected").val();
				if(city_area == "选择优惠券") {
					return false;
				}else{
					alert('用户下拉菜单选择的优惠卷为:'+city_area)
				}
			}
		</script>
	</body>

</html>

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

a_靖

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <title>单选...
复制链接

扫一扫