dijit/form/RadioButton

簡介

dijit/form/RadioButton 的作用是在眾多的選項中挑選一個，和 dijit/form/Select 的作用很類似。在選項不多的情況下， RadioButton 可以一次把選項都顯示在畫面上，所有選項一目瞭然，使用者可以立刻進行挑選，比較有效率。但如果選項過多時，畫面上會顯得有點雜亂，反而不美。同一組的 RadioButton 中，使用者只能單選，也就是說，只能挑選其中一個選項。

範例

範例中展示了兩組 RadioButton 的選項，一組用宣告法建立，另一組用程式法建立。兩組都放在一個 dojox/form/Manager 的容器中，由 form Manager 管理。另建置按鈕一個，按下按鈕時，在「開發者工具」的「主控台」中，會顯示選擇的結果。

CSS

<style>
html {
    width: 100%;
    height: 100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%;
    padding:20px;
}
</style>

沒有特別的樣式需要設定。

HTML

<body class="claro">
    
        
            Fruit            
            Apple<br>
            Pineapple<br>
            Banana
        <br>
        
            Drink
            
                Tea<br>
                Coffee
            
        
    
    
</body>

第 5~9 行用宣告法建立三個 RadioButton
第 15~17 行放置二個 RadioButton 的掛載點。注意每個 <input> 標記中的 "name" 屬性值都是一樣的。

Script

第 22~31 行用程式法建立二個 RadioButton 各自掛載到相對的位置上。
第 34~35 行將兩個用程式法建立的 RadioButton 註冊到 form manager，讓 form manager 知道還有這兩個 dijit 要管。不然會讀取不到選擇值。
第 37 行展示另一種在按鈕被點按 (click) 時，要執行動作的另一種寫法。
第 38 行利用 form manager dijit 的 gatherFormValues() 函式，收集所有輸入資料，並將其顯示在主控台中。
宣告法中的 RadioButton 並沒有設定預設要選定哪一個選項，如果使用者都沒有選，則 gatherFormValues() 函式中的資料 "fruit" 的值會是一個空字串。

熊伯的外接硬碟

2015年10月11日星期日