js操作多选框&下拉框

最新推荐文章于 2024-05-15 15:39:09 发布

you些话

最新推荐文章于 2024-05-15 15:39:09 发布

阅读量1.5k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44805105/article/details/110930183

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

		js操作多选框、单选框
			被选中状态下在js中checked属性值为true,未选中状态为false;
		js操作下拉框：
			被选择的option对象在js中selected属性值为true，未选中为false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js操作多选框和下拉列表</title>
		<script type="text/javascript">
			//多选框操作
			function testCheckBox(){
				//获取所有的多选元素对象数组
				var fa=document.getElementsByName("fav");
				//遍历数组
				for(var i=0;i<fa.length;i++){
					if(fa[i].checked){
						alert(fa[i].value+":"+fa[i].checked);
					}
				}
			}
			//全选
			function testCheckBox2(){
				//获取所有的多选元素对象数组
					var fa=document.getElementsByName("fav");
					for(var i=0;i<fa.length;i++){
						fa[i].checked=true;
					}
			}
			//反选
			function testCheckBox3(){
				//获取所有的多选元素对象数组
					var fa=document.getElementsByName("fav");
					for(var i=0;i<fa.length;i++){
						fa[i].checked= !fa[i].checked;
					}
			}
			
			//操作下拉框
			function testSel(){
				var sel=document.getElementById("address");
				//alert(sel.value);
				//获取option对象集合
				var os=sel.options;
				for(var i=0;i<os.length;i++){
					if(os[i].selected){
						alert(os[i].value+":"+os[i].text);
					}
				}
			}
		</script>
	</head>
	<body>
		<b>操作多选框</b><br />
		<input type="checkbox" name="fav" id="fav" value="1" />学<br />
		<input type="checkbox" name="fav" id="fav" value="2" />习<br />
		<input type="checkbox" name="fav" id="fav" value="3" />？<br />
		<input type="checkbox" name="fav" id="fav" value="4" />学<br />
		<input type="checkbox" name="fav" id="fav" value="5" />个<br />
		<input type="checkbox" name="fav" id="fav" value="6" />屁<br />
		<input type="checkbox" name="fav" id="fav" value="7" />！<br />
		<input type="button" id=""value="播放" onclick="testCheckBox();" />
		<input type="button" id=""value="全选" onclick="testCheckBox2();" />
		<input type="button" id=""value="反选" onclick="testCheckBox3()" />
		<hr />
		<select name="" id="address" onchange="testSel();">
			<option value="0">--请选择--</option>
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">广州</option>
		</select>
	</body>
</html>

在这里插入图片描述

you些话

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js操作多选框&下拉框

js操作多选框、单选框被选中状态下在js中checked属性值为true,未选中状态为false; js操作下拉框：被选择的option对象在js中selected属性值为true，未选中为false<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js操作多选框和下拉列表</title> <script type="t..
复制链接

扫一扫