<FORM>
<INPUT TYPE="radio" NAME="rdA" ... >
<INPUT TYPE="radio" NAME="rdA" ... >
......
</FORM>
這樣的同型態同名標籤所組成的多選一集合元件。
<SELECT>
<OPTION VALUE="vA" ... >選項一</OPTION>
<OPTION VALUE="vB" ... >選項二</OPTION>
......
</SELECT>
這樣的，用 SELECT 標籤去包裹數個 OPTION 標籤而成的集合選項物件。
var 變數名稱=document.forms.表單名稱.elements.子元件名稱.value;但如果你用上述語法去取表單集合子元件的值是會產生錯誤的，因為集合子元件是數個 更下層元素共用一個名稱索引，所以光指名是那個元件還不夠，還要指明是該元件的 第幾個元素，才能確切知道瀏覽者的選取值。而如何得知瀏覽者選擇了集合子元件的 第幾個元素，就是本範例要和你討論的問題。
<FORM NAME="form1">
<!-- 使用四個取名為 rd1 的 radio 選鈕，來構成一個多選一集合物件。 // -->>
<INPUT TYPE="radio" NAME="rd1" VALUE="漢堡" CHECKED>漢堡
<INPUT TYPE="radio" NAME="rd1" VALUE="義大利麵">義大利麵
<INPUT TYPE="radio" NAME="rd1" VALUE="炸雞">炸雞
<INPUT TYPE="radio" NAME="rd1" VALUE="披薩">披薩
<!-- 當按傳送鍵時執行 masterFoodChoiceA() radio 偵測自訂函式 // -->>
<INPUT TYPE="submit" VALUE="傳送菜單" onclick="masterFoodChoiceA();return false;">
</FORM>
/* radio 集合選項偵測函式，
參數 elem 是指外部傳入的 radio 集合物件。 */
function radioChoiceDetect(elem)
{
/* 變數 result 紀錄 radio 集合物件第幾項被選取，並傳回呼叫函式。 */
var result;
/* 逐一檢查各 radio 元素是否被選取 */
for (var i=0;i < elem.length;i++)
/* 如果某 radio 的 checked 值為真，表示被瀏覽者選取，那就由 result 紀錄其
索引編號；也因為 radio 的特性是多選一，所以有一個被選取後，就不需再檢查，
故使用 break 敘述終止迴圈執行。 */
{if (elem[i].checked) {result=i;break;}}
/* 傳回 radio 被選元素的索引編號 */
return result;}
然後我們再準備可供 form1 表單 submit 鈕所呼叫的執行函式 masterFoodChoiceA()：
function masterFoodChoiceA()
{
/* 準備好要向 radioChoiceDetect 函式傳送的 radio 集合物件 */
var sendobj=document.forms.form1.elements.rd1;
/* 依 radioChoiceDetect 函式的傳回值，顯示 radio 集合中的被選項 value 。 */
alert("你選擇的餐點是 "+sendobj[radioChoiceDetect(sendobj)].value);}
<FORM NAME="form2">
<SELECT NAME="sel1">
<OPTION VALUE="20">咖啡</OPTION>
<OPTION VALUE="15">紅茶</OPTION>
<OPTION VALUE="5">可樂</OPTION>
<OPTION VALUE="10">果汁</OPTION>
</SELECT>
<INPUT TYPE="submit" VALUE="傳送菜單"
onclick="drinkChoiceA();return false;">
</FORM>
我們可以引用偵測 RADIO 選項的自訂函式來偵測 SELECT 的瀏覽者選項，惟一要注意
的是 SELECT 集合元素的是否被選取，判別屬性不是 checked ，而是 selected。
我們把 radioChoiceDetect 函式改寫如下：
/* select 集合選項偵測函式，
參數 elem 是指外部傳入的 select 集合物件。 */
function selectChoiceDetect(elem)
{var result;
for (var i=0;i < elem.length;i++)
{if (elem[i].selected) {result=i;break;}}
return result;}
除了函式名稱和紅色粗體字處有改變外，其他完全照抄。
function drinkChoiceA()
{var sendobj=document.forms.form2.elements.sel1;
/* 呼叫 selectChoiceDetect 函式查出瀏覽者選了那種飲料 */
var no=selectChoiceDetect(sendobj);
alert("你選擇的飲料是："+sendobj[no].text+"\n價錢是："
+sendobj[no].value+"元");}
function drinkChoiceA()
{var sendobj=document.forms.form2.elements.sel1;
var no=selectChoiceDetect(sendobj);
var no=sendobj.selectedIndex;
alert("你選擇的飲料是："+sendobj[no].text+"\n價錢是："
+sendobj[no].value+"元");}
/* 銀灰字表刪除之原敘述，紅色字表新增之敘述。 */
<FORM NAME="form3">
<SELECT NAME="sel1" MULTIPLE SIZE="3">
<OPTION VALUE="25">薯條</OPTION>
<OPTION VALUE="40">雞塊</OPTION>
<OPTION VALUE="30">南瓜派</OPTION>
<OPTION VALUE="30">頻果派</OPTION>
<OPTION VALUE="25">洋蔥圈</OPTION>
</SELECT>
<INPUT TYPE="submit" VALUE="傳送菜單"
onclick="snikerChoice();return false;">
</FORM>
/* SELECT 複選項偵測函式 */
function multiSelectChoiceDetect(elem)
{var result=new Array(); //因為要把所有選擇項目都紀錄下來，所以使用陣列變數。
for (var i=0;i < elem.length;i++)
{if (elem[i].selected) {result[result.length]=i;}} //要從頭到尾，找出所有被選項目，所以不使用 break 脫離敘述。
/* 傳回陣列，而非單一值。 */
return result;}
/* SELECT 複選項顯示函式 */
function snikerChoice()
{var sendobj=document.forms.form3.elements.sel1;
/* 用 choice 接收偵測函式傳回之陣列值 */
var choice=multiSelectChoiceDetect(sendobj);
var total=0;
var str="你選擇的點心是：";
/* 逐一處理選擇項目 */
for (var i=0;i < choice.length;i++)
{str+="\n"+sendobj[choice[i]].text; //將選項名稱加入顯示字串。
total+=parseFloat(sendobj[choice[i]].value);} //總計選項金額。
str+="\n點心總金額是："+total+" 元";
alert(str);
好了，有了上面各段使用表單集合元件的選項偵測技術后，你已經有足夠的能力去設計 一份動態報價的網頁，下面是這些 DHTML 技術的綜合運用，你可以參考看看。