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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:18 PM

domjs下拉式選單單選按鈕複選框方法設定

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

1.設定單選按鈕

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

先貼上例子：

複製程式碼程式碼如下:

單選按鈕在表單中即它是一組供使用者選擇的對象，但每次只能選一個。每一個都有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程式設計有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。