21 表单小练习

效果先看

功能描述

第一个实现的是模拟播放器选歌界面。

第二个实现的是select标签获取值与文本的界面

获取文本方法：获取select元素，通过点options获取option集合，option对象点text获取文本

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//多选框操作
			function testCheckBox(){
				//获取所有多选元素数组
				var favs = document.getElementsByName("fav");
				for(var i=0;i<favs.length;i++){
					if(favs[i].checked===true){
					alert(favs[i].value);
					}
				}
			}
			function choseAll(){
				var favs = document.getElementsByName("fav");
				var count = 0;//未全选
				favs[1].cheched=true;
				for(var i=0;i<favs.length;i++){
					if(favs[i].checked==true){
						count++;
					}else{
						favs[i].checked=true;
					}
				}
				if(count==favs.length){
					for(var i=0;i<favs.length;i++){
						favs[i].checked=false;
					}
				}
			}
			function reverseChose(){
				var favs = document.getElementsByName("fav");
				for(var i=0;i<favs.length;i++){
					if(favs[i].checked==true){
						favs[i].checked=false;
					}else{
						favs[i].checked=true;
					}
				}
			}
				
			function onchangeTest(){
				var sel = document.getElementById("sel");
				var options = sel.options;
				for(var i=0;i<options.length;i++){
					if(options[i].selected){
						alert(options[i].text);
					}
				}
			}
		</script>
	</head>
	<body>
		<h3>操作表单元素</h3>
		<hr>
		<b>操作多选框</b>
		<br>
		<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="button" name="" id="" value="播放" onclick="testCheckBox()"><br>
		<input type="button" name="" id="" value="全选" onclick="choseAll()"/><br>
		<input type="button" name="" id="" value="反选" onclick="reverseChose()"/><br>
		<hr>
		<select id="sel" onchange="onchangeTest()">
			<option value ="0">---请选择---</option>
			<option value ="1">北京</option>
			<option value ="2">上海</option>
			<option value ="3">广州</option>
		</select>
	</body>
</html>