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>