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

不念不忘少年蓝@ 2021-07-24 11:33 834阅读 0赞

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>