前端学习——js操作表单元素

最新推荐文章于 2020-06-26 09:56:50 发布

野生小米椒

最新推荐文章于 2020-06-26 09:56:50 发布

阅读量222

点赞数 1

分类专栏：三大基础语言

本文链接：https://blog.csdn.net/x1037490413/article/details/89108512

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作表单元素</title>
		<!--
			js操作多选框，单选框
			   被选中状态下在js中checked属性值为true,未选中状态下为false
			//js操作下拉框：
			       被选择的option对象在js中selected属性值为true,未选中状态为false
		-->
		<script type="text/javascript">
			function testCheckBox(){
				//获取所有的多选元素对象数组
			 var favs=document.getElementsByName("fav");
			 //遍历数组
			 for(var i=0;i<favs.length;i++){
			 	if(favs[i].checked){
			 		alert(favs[i].value);
			 	}
			 	
			 }
			}
			//全选
			function testCheckBox2(){
				var favs=document.getElementsByName("fav");
				for(var i=0;i<favs.length;i++)
				{
					favs[i].checked=true;
				}
			}
			//反选
			function testCheckBox3(){
				var favs=document.getElementsByName("fav");
				for(var i=0;i<favs.length;i++){  
					favs[i].checked=!favs[i].checked;
				}
			}
			//下拉框
			function testSle(){
				//获取下拉框对象
				var sel=document.getElementById("adress");
				//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>
		<h3>操作表单元素</h3><hr />
		<b>操作多选框</b><br />
		<input type="checkbox" name="fav" id="fav" value="1" />可乐<br />
		<input type="checkbox" name="fav" id="fav" value="2" />R&B<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" />Solitude Theme<br />
		<input type="button" name="" id="" value="播放" onclick="testCheckBox()" /><br />
		<input type="button" name="" id="" value="全选 "onclick="testCheckBox2()" />
		<input type="button" name="" id="" value="反选 "onclick="testCheckBox3()" />
		<br /><b>操作下拉框</b><br />
		<select name="" id="adress" onchange="testSle()">
			<option value="0">--请选择--</option>
			<option value="1">北京</option>
			<option value="2">广州</option>
			<option value="3">深圳</option>
		</select>
		
	</body>
</html>

野生小米椒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端学习——js操作表单元素

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>操作表单元素</title> <!-- js操作多选框，单选框被选中状态下在js中checked属性值为true,未选中状态下为false //js操作下拉框：...
复制链接

扫一扫

专栏目录