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

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

1.設定單選按鈕

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

先貼上例子：

複製程式碼 程式碼如下:

    相機品牌：
   

 
 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.設定多重選取框

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

複製程式碼 程式碼如下:

    喜歡做的事：
   

 
 打球
   

   

 
 看電視
   

   

 
 上網
   

   

 
 看書
   

   

 
 旅遊
   

   

 
 音樂
   

   

 
 其它
   

   

 
 
 
 
   

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

3.下拉式選單

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

下拉式選單的常用屬性：

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

  
①. 下拉式選單取得單選值

複製程式碼 程式碼如下:

    星座：
   

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

   

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

複製程式碼 程式碼如下:

 星座：
 

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

 

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

複製程式碼 程式碼如下:

    星座：
   

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

   

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

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