js 操作form表单多选框、下拉框

最新推荐文章于 2024-01-31 16:21:47 发布

神奇大叔

最新推荐文章于 2024-01-31 16:21:47 发布

阅读量1.9k

点赞数 1

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/102907837

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

js操作多选框

	**获取指定打勾对象**	
		获取多选框对象,遍历
		通过勾选属性checked为true来判断
				function t1()
			{
				var favs=document.getElementsByName("fav");
				for(var i=0;i<favs.length;i++)
				{
					/*打印只勾选的多选框*/
					if(favs[i].checked)
					{
						alert(favs[i].value);
					}
				
				}
			}


	**全部打勾**
		遍历多选框对象，将checked属性改为true或"checked"
				function t2()
			{
				var fs=document.getElementsByName("fav");
				for(var i=0;i<fs.length;i++)
				{
					fs[i].checked="checked";
				}
			}
			

	**全部撤销打勾**
		遍历多选框对象,将checked属性改为false
				function t3()
			{
				var fs=document.getElementsByName("fav");
				for(var i=0;i<fs.length;i++)
				{
					fs[i].checked=false;
				}
			}


	**反选**
		遍历多选框对象，将checked的属性值变反
				function t4()
			{
				var fs=document.getElementsByName("fav");
				for(var i=0;i<fs.length;i++)
				{
					fs[i].checked=!fs[i].checked;
				}
			}
			
			
js操作下拉框

	通过获取select对象
		var sel=document.getElementById("address");
		
		**获取下拉框option对象的value值**
			sel.value;  获取当前下拉框的value值
			
		**获取下拉框对象的集合**
			select对象名.options
				var os=sel.options;
				
					获取option对象的value值
						os[i].value;
						
					获取option对象的文本内容
						osp[i].text;
								for(var i=0;i<os.length;i++)
							{
								alert(os[i].value+":"+os[i].text);
							}
		
		**获取指定下拉框内容**
			通过selected属性内容同多选框的checked方式来判断
					for(var i=0;i<os.length;i++)
				{
					if(os[i].selected)
					{
						alert(os[i].value+":"+os[i].text);
					}
				}

代码示例:


<html>
	<head>
		<meta charset="utf-8">
		<title>js 操作表单元素</title>
		<script type="text/javascript">
			function t1()
			{
				var favs=document.getElementsByName("fav");
				for(var i=0;i<favs.length;i++)
				{
					/*打印只勾选的多选框*/
					if(favs[i].checked)
					{
						alert(favs[i].value);
					}
				
				}
			}
			function t2()
			{
				var fs=document.getElementsByName("fav");
				for(var i=0;i<fs.length;i++)
				{
					fs[i].checked="checked";
				}
			}
			function t3()
			{
				var fs=document.getElementsByName("fav");
				for(var i=0;i<fs.length;i++)
				{
					fs[i].checked=false;
				}
			}
			function t4()
			{
				var fs=document.getElementsByName("fav");
				for(var i=0;i<fs.length;i++)
				{
					fs[i].checked=!fs[i].checked;
				}
			}
			function t5()
			{
				/*获取下拉框对象*/
				var sel=document.getElementById("address");
			//	alert(sel.value);
				/*获取option对象*/
				var os=sel.options;
//				for(var i=0;i<os.length;i++)
//				{
//					alert(os[i].value+":"+os[i].text);
//				}
				
				for(var i=0;i<os.length;i++)
				{
					if(os[i].selected)
					{
						alert(os[i].value+":"+os[i].text);
					}
				}
			}
		</script>
	</head>
	<body>
		<hr />
		<input type="checkbox" name="fav" id="fav" value="1" />远走
		<input type="checkbox" name="fav" id="fav" value="2" />当
		<input type="checkbox" name="fav" id="fav" value="3" />李白
		<input type="checkbox" name="fav" id="fav" value="4" />修炼爱情
		<input type="checkbox" name="fav" id="fav" value="5" />嘿嘿
		<input type="checkbox" name="fav" id="fav" value="6" />呵呵
		
		<input type="button" value="播放" onclick="t1()" />
		<input type="button" value="全选" onclick="t2()" />
		<input type="button" value="全删" onclick="t3()"/>
		<input type="button" value="反选" onclick="t4()"/>
		<hr />
		<select name="" id="address" onchange="t5()">
			<option value="1">你</option>
			<option value="2">我</option>
			<option value="3">他</option>
			<option value="4">我</option>
		</select>
	</body>
</html>

神奇大叔

关注

1
点赞
踩
7

收藏

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

js操作多选框 **获取指定打勾对象** 获取多选框对象,遍历通过勾选属性checked为true来判断 function t1() { var favs=document.getElementsByName("fav"); for(var i=0;i<favs.length;i++) { /*打印只勾选的多选框*/ ...
复制链接

扫一扫

专栏目录