效果先看
功能描述
第一个实现的是模拟播放器选歌界面。
第二个实现的是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>