dijit/form/CheckBox

簡介

dijit/form/CheckBox 是除了dijit/form/Radiobutton 之外，另一種讓使用者一眼看到所有選項的介面元件。不同的是：

dijit/form/RadionButton 是單選，所有選項只能撰擇其中一項，而 dijit/form/CheckBox 是複選，可以選擇多個選項，甚至全選。
兩者另一個不同點在 dijit/form/RadioButton 的介面是一個圓形按鈕，而 dijit/from/CheckBox 的介面是一個方形的檢核框。
同一組的 dijit/form/RadioButton 的 "name" 屬性值都相同，而 dijit/form/CheckBox 則每個元件的 name 屬性值都不同。

範例

範例中展示了兩組 CheckBox 的選項，一組用宣告法建立，另一組用程式法建立。兩組都放在一個 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

            Pineapple

            Banana
        


        
            Drink
            Tea

            Coffee
        

    
</body>

第 5~9 行用宣告法建立三個 CheckBox
第 14~16 行放置二個 CheckBox 的掛載點。注意每個 <input> 標記中的 "name" 屬性值都不相同。

Script

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

熊伯的外接硬碟

2015年10月11日星期日