js使用DOM設定單選按鈕、複選框及下拉式選單的方法

本文實例講述了js使用DOM設定單選按鈕、複選框及下拉式選單的方法。分享給大家供大家參考。具體實作方法如下：

1.設定單選按鈕

單選按鈕在表單中即 它是一組供使用者選擇的對象，但每次只能選一個。每一個都有checked屬性，當一項選擇為ture時，其它的都變成false.

先貼上例子：

複製程式碼 程式碼如下: function getChoice() { var oForm = document.forms["uForm1"]; var aChoices = oForm.camera; for (i = 0; i if (aChoices[i].checked) //若發現了被選取項目則退出 break; alert("相機品牌是：" aChoices[i].value); } function setChoice(iNum) { var oForm = document.forms["uForm1"]; oForm.camera[iNum].checked = true; } 相機品牌： Canon

Nikon

Sony

Olympus

Samsung

Pentax

others

單選按鈕在表單中即 它是一組供使用者選擇的對象，但每次只能選一個。每一個都有checked屬性，當一項選擇為ture時，其它的都變成false. 從上述程式碼中看出，id和name是不同的，一組單選按鈕中它們的name是相同的，只有一個被選取。 id則是綁定 或者其它選擇作用的。

其中程式碼中：檢查被選取物件的程式碼是（當某一項的chcked值為ture時，遍歷結束）

複製程式碼 程式碼如下: var oForm = document.forms["uForm1"]; var oForm = document.forms["uForm1"]; var aChoices = oForm.camera; for (i = 0; i if (aChoices[i].checked) //如果發現了被選取項目則退出 break; alert("相機品牌是：" aChoices[i].value); 2.設定多重選取框

與單選按鈕不同，複選框 可以同時選取多個選項進行處理，郵箱中每條郵件之前的複選框

複製程式碼 程式碼如下: function checkbox() { var str = document.getElementsByName("hobby"); var objarray = str.length; var chestr = ""; for (j = 0; j if (str[j].checked == true) { chestr = str[j].value ","; } } if (chestr == "") { alert("請先選擇一個嗜好～！"); } else { alert("您先選擇的是：" chestr); } } function changeBoxes(action) { var oForm = document.forms["myForm1"]; var oCheckBox = oForm.hobby; for (var i = 0; i if (action oCheckBox[i].checked = !oCheckBox[i].checked; else //action為1是則全選，為0時則全不選 oCheckBox[i].checked = action; }

喜歡做的事： 打球

看電視

上網

看書

旅遊

音樂

其它

複選框原理利用checked屬性布林值來決定，全選和不全選可以採用0和1的方式傳遞參數。

3.下拉式選單

下拉式選單 是比較常用的表單元素。當它的下拉為單選時，和單選按鈕 功能一樣，當下拉式選單為多選時multiple="multiple時，功能相當複選框，但所佔面積遠小於複選框。

下拉式選單的常用屬性：

<table border="1" cellspacing="0" style="box-sizing: border-box; border-bottom: silver 1px solid; border-left: silver 1px solid; text-transform: none; background-color: rgb(255,255,255); text-indent: 0px; width: 619px; border-collapse: collapse; font: 13px/20px Verdana, Arial, Helvetica, sans-serif; white-space: normal; letter-spacing: normal; height: 219px; color: rgb(75,75,75); border-top: silver 1px solid; border-right: silver 1px solid; word-spacing: 0px; -webkit-text-stroke-width: 0px"> 屬性 說明 length 表示選項 個數 selected 布林值，表示 是否被選取 SelectedIndex 被選取選項的序號，如果沒有選項被選取則為-1,對於多重選取下拉式選單而言，傳回第一個被選取 的序號，從0開始計數 text 選項的文字 value 選項的值 type 下拉式選單的類型，單選回傳select-one,多選回傳select-multiple options 取得選項的陣列 ，例如：oSelectBox.options[2]，表示下拉式選單oSelectBox第三項 ①. 下拉式選單取得單選值 複製程式碼 程式碼如下: function checkSingle() { var oForm = document.forms["myForm1"]; var oSelectBox = oForm.constellation; var iChoice = oSelectBox.selectedIndex; //取得選取項目 alert("您選取了" oSelectBox.options[iChoice].text); }

星座： 牡羊 金牛 雙子 巨蟹 獅子 處女 天秤 天蠍 射手 摩羯 水瓶 雙魚

②. 下拉式選單為多選時，取值

複製程式碼 程式碼如下: function checkMultiple() { var oForm = document.forms["myForm1"]; var oSelectBox = oForm.constellation; var aChoices = new Array(); //遍歷整個下拉式選單 for (var i = 0; i if (oSelectBox.options[i].selected) //如果被選取 aChoices.push(oSelectBox.options[i].text); //壓入陣列中 alert("您選了：" aChoices.join()); //輸出結果 }

星座： 牡羊 金牛 雙子 巨蟹 獅子 處女 天秤 天蠍 射手 摩羯 水瓶 雙魚

③. 通用取值（下拉單選和多選的情況）

複製程式碼 程式碼如下: function getSelectValue(Box) { var oForm = document.forms["myForm1"]; var oSelectBox = oForm.elements[Box]; //根據參數對應的選擇下拉式選單 if (oSelectBox.type == "select-one") { //判斷是單選還是多選 var iChoice = oSelectBox.selectedIndex; //取得選取項目 alert("單選，您選取了" oSelectBox.options[iChoice].text); } else { var aChoices = new Array(); //遍歷整個下拉式選單 for (var i = 0; i if (oSelectBox.options[i].selected) //如果被選取 aChoices.push(oSelectBox.options[i].text); //壓入陣列中 alert("多選，您選擇了：" aChoices.join()); //輸出結果 } }

星座： 牡羊 金牛 雙子 巨蟹 獅子 處女 天秤 天蠍 射手 摩羯 水瓶 雙魚

牡羊 金牛 雙子 巨蟹 獅子 處女 天秤 天蠍 射手 摩羯 水瓶 雙魚

希望本文所述對大家的javascript程式設計有所幫助。

屬性	說明
length	表示選項
selected	布林值，表示
SelectedIndex	被選取選項的序號，如果沒有選項被選取則為-1,對於多重選取下拉式選單而言，傳回第一個被選取的序號，從0開始計數
text	選項的文字
value	選項的值
type	下拉式選單的類型，單選回傳select-one,多選回傳select-multiple
options	取得選項的陣列，例如：oSelectBox.options[2]，表示下拉式選單oSelectBox第三項

js使用DOM設定單選按鈕、複選框及下拉式選單的方法_javascript技巧