DHTML4(select与checkbox应用)
生活随笔
收集整理的這篇文章主要介紹了
DHTML4(select与checkbox应用)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
1.checkbox例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>獲取checkbox選中內容</title> <script type="text/javascript">function sum(){var inputNodes=document.getElementsByName("notebook");var sum=0;for(var i=0;i<inputNodes.length;++i)if(inputNodes[i].checked) sum+=parseInt(inputNodes[i].value);var spanNode=document.getElementById("sumMoney");spanNode.innerHTML="<font size='7' color='red'>"+sum+"</font>";}function checkAll(index){//var checkAllNode=document.getElementsByName("checkAll")[index];//不傳入index,也可以直接使用//event.srcElement來完成 var inputNodes=document.getElementsByName("notebook");for(var i=0;i<inputNodes.length;++i)// inputNodes[i].checked=checkAllNode.checked;//直接賦值為"全選"復選框的狀態 inputNodes[i].checked=event.srcElement.checked;} </script> </head><body><input type="checkbox" name="checkAll" onclick="checkAll(0)"/>全選<br/><input type="checkbox" name="notebook" value="4000" />lenovo筆記本:4000元<br/><input type="checkbox" name="notebook" value="3000" />Dell筆記本:3000元<br/><input type="checkbox" name="notebook" value="5000" />ASUS筆記本:5000元<br/><input type="checkbox" name="notebook" value="3500" />Acer筆記本:3500元<br/><input type="checkbox" name="notebook" value="3500" />Acer筆記本:3500元<br/><input type="checkbox" name="notebook" value="13500" />Alienware筆記本:13500元<br/><input type="checkbox" name="checkAll" onclick="checkAll(1)"/>全選<br/><input type="button" onclick="sum()" value="計算總金額"/><span id="sumMoney"></span> </body> </html>2.select應用一:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>select動態效果</title> <script type="text/javascript" src="JS/documentTools.js"></script> <style type="text/css">#textClass{background-color:#FC6;width:400px;height:100px;}#selText{background-color:#CCC;width:200px;} </style></head><body> <div id="textClass">Each prick silk has a goddess in my heart.<br/>每一個屌絲心中都有一個女神 </div> <br/> <br/> <select id="selID" onchange="change()"><option value="none">--請選擇--</option><option value="capitalize">首字母大寫</option><option value="uppercase">所有字母大寫</option><option value="lowercase">所有字母小寫</option> </select> <br/> <br/> <div id="selText"> 選中的內容:--請選擇-- </div> </body> </html> <script type="text/javascript">function change(){with(document){var selectNode=getElementById("selID"); var optionNodes=selectNode.options;var selectValue=optionNodes[selectNode.selectedIndex].value;getElementById("selText").innerHTML="選中的內容:"+selectValue;var divObj=getElementById("textClass")divObj.style.textTransform=selectValue;//直接設置style對象中的樣式屬性textTransform的值 }}</script>3.級聯select示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>級聯選擇</title> <script type="text/javascript" src="JS/documentTools.js"></script> <script type="text/javascript">function selectPro(){var proCity=[["--選擇城市--"],["三門峽","平頂山","周口","駐馬店"],["泰安市","威海市","日照市","濱州市"], ["杭州市","溫州市","嘉興市","紹興市 "],["東城區","西城區","海淀區","朝陽區"]]; var selProNode=byID("selPro"); var selCityNode=byID("selCity");var arrPro=proCity[selProNode.selectedIndex]; //clearAll(selCityNode); selCityNode.options.length=0;//最簡單的一種清空方式for(var i=0;i<arrPro.length;++i){var optionNode=document.createElement("option");selCityNode.options.add(optionNode);//或者使用selCityNode.appendChild(optionNode); optionNode.innerText=arrPro[i];}}/*常規思路:刪除元素*/function clearAll(selCityNode){//下次選省前清空上次對應所有市var choices=selCityNode.optionsfor(var i=0;i<choices.length;){ //options.length在remove的過程中時刻在變化//每刪除一個,其余元素的索引-1; choices.remove(i);//該方法移除options中指定index元素//selCityNode.removeChild(choices[i]);//該方法的執行會引起options集合元素索引變化,以及 //options.length變化,兩種方法任選一種 } } </script></head><body> <select id="selPro" onchange="selectPro()"><option value="none">--選擇省市--</option><option >河南</option><option >山東</option><option >浙江</option><option >北京</option> </select> <select id="selCity"><option>--選擇城市--</option> </select> </body> </html>如果再有縣等,那么就把縣放到一個二維數組,二維數組的第一維和選中的市相對應,然后操作思想和上面相同
關于常規思路清空上次所有的option:
//本想用with語句偷懶,沒想到引發bug
with(selCityNode){
?? if(options.length>1){//除了"選擇"option
????????
???????? var length=options.length;//options.length在remove的過程中時刻在變化
?????????????????????????????????? //刪除的個數(次數:刪除length-1次)是不變的
????????? for(var i=1;i<length;++i)
??????????? options.remove(1);
????? }
?? }
alert("length="+selCityNode.options.length);//3 //測試語句,以上使用with語句后,集合中的引用不能刪除成功
關于with語句的bug:http://www.neoease.com/javascript-with-statement/
轉載于:https://www.cnblogs.com/yiqiu2324/p/3285952.html
總結
以上是生活随笔為你收集整理的DHTML4(select与checkbox应用)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IOS - 快速入门
- 下一篇： 进入前端开发这个领域 ，请问如何进行系统