上一篇測試 "
jQuery UI 學習筆記 (八) : 按鈕群組 (Buttonset) " 以 buttonset() 將 radio/checkbox 的選項轉變成按鈕群組, 使選項具有主題布景色彩; 但是可能需在提示文字中加註 "單選" 或 "複選", 避免被誤認為是一般按鈕.
可否在這些選項按鈕上保留 radio 單選圓鈕與 checkbox 多選方塊的圖樣, 以便與一般按鈕有明顯區隔呢? 可以的, 可呼叫 checkboxradio() 使 radio/checkbox 轉變成具有圓鈕與核取方塊的按鈕群組.
Checkboxradio 的API 與教學文件參考 :
#
https://jqueryui.com/checkboxradio/
#
http://api.jqueryui.com/checkboxradio/
本篇測試參考了如下書籍 :
- jQuery UI 使用者介面設計 (歐萊里, Studio Tib. 譯)
- jQuery UI 與 Plugin 開發實戰 (悅知文化, 吳哲穎譯)
- jQuery 全能權威指南 (上奇, 張亞飛)
將 radio/checkbox 轉變成 CheckboxRadio 按鈕元件只要用選擇器選取全部 input 元素, 再呼叫 checkboxradio() 方法即可 :
$("input").checkboxradio();
這樣雖然會選取全部 input 元素, 不過沒有關係, jQuery UI 會自動找尋 type=radio 與 type=checkbox 的元素進行渲染, 其他 input 元素不會受到影響, 例如 :
測試 1 : CheckboxRadio 測試 : checkbox 勾勾無顯示 [看原始碼]
HTML 部分 :
<p>請選擇最討厭的水果 (單選) :</p>
<div>
<input type="radio" name="hatest_fruit" id="h1" value="芭樂">
<label for="h1">芭樂</label></input>
<input type="radio" name="hatest_fruit" id="h2" value="香蕉">
<label for="h2">香蕉</label></input>
<input type="radio" name="hatest_fruit" id="h3" value="葡萄">
<label for="h3">葡萄</label></input>
<input type="radio" name="hatest_fruit" id="h4" value="榴槤">
<label for="h4">榴槤</label></input>
<input type="radio" name="hatest_fruit" id="h5" value="木瓜">
<label for="h5">木瓜</label></input>
</div>
<p>請選擇最常吃的水果 (複選) :</p>
<div>
<input type="checkbox" name="often_fruit" id="o1" value="芭樂">
<label for="o1">芭樂</label></input>
<input type="checkbox" name="often_fruit" id="o2" value="香蕉">
<label for="o2">香蕉</label></input>
<input type="checkbox" name="often_fruit" id="o3" value="葡萄">
<label for="o3">葡萄</label></input>
<input type="checkbox" name="often_fruit" id="o4" value="榴槤">
<label for="o4">榴槤</label></input>
<input type="checkbox" name="often_fruit" id="o5" value="木瓜">
<label for="o5">木瓜</label></input>
</div><br>
<button id="ok">確定</button>
jQuery 部分 :
$("#ok").button();
$("input").checkboxradio();
$("#ok").click(function(e) {
var hatest_fruit=$("[name=hatest_fruit]:radio:checked").val();
var arr=[];
$("[name=often_fruit]:checkbox:checked").each(function(){
arr.push($(this).val());
});
var often_fruit=arr.join();
var msg="您最討厭的水果是 : " + hatest_fruit + "\n" +
"您最常吃的水果是 : " + often_fruit;
alert(msg);
});
注意, checkbox 按鈕有點奇怪, 勾選後按鈕變成紅色, 但打勾卻消失, 只有滑鼠 hover 滑到選項按鈕上面時才會出現勾勾. 但這是因為選用 jQuery UI 主題背景 hot-sneaks 的關係, 若改用其他主題就不會, 例如用 base 或 eggplant 等主題就不會 :
<link id="theme" href="themes/
hot-sneaks/jquery-ui.min.css" rel="stylesheet">
測試 2 : CheckboxRadio 測試 : checkbox 勾勾有顯示 [看原始碼]
<link href="themes/
base/jquery-ui.min.css" rel="stylesheet">
事實上, jQuery UI 25 個預設主題布景中有 16 個有勾勾被蓋掉情形, 下列範例使用下拉式選單切換主題布景來測試, 這是透過給樣式主題的 link 元素設 id, 然後用 SelectMenu 下拉式選單的 selectmenuchange 事件來切換主題名稱, 參考 :
#
jQuery UI 學習筆記 (一) : 主題布景 (Themes)
測試 3 : CheckboxRadio 測試 : 主題布景切換 [看原始碼]
<link
id="theme" href="themes/
eggplant/jquery-ui.min.css" rel="stylesheet">
這些按鈕看起來似乎是獨立的, 可以選取這些選項呼叫 buttonset() 將這些選項按鈕都變成按鈕群組, 參考 :
#
jQuery UI 學習筆記 (八) : 按鈕群組 (Buttonset)
例如 :
測試 4 : CheckboxRadio 測試 : 呼叫 buttonset 形成按鈕群組 [看原始碼]
HTML 部分 :
<p>請選擇最討厭的水果 (單選) :</p>
<
div>
<input type="radio" name="hatest_fruit" id="h1" value="芭樂">
<label for="h1">芭樂</label></input>
<input type="radio" name="hatest_fruit" id="h2" value="香蕉">
<label for="h2">香蕉</label></input>
<input type="radio" name="hatest_fruit" id="h3" value="葡萄">
<label for="h3">葡萄</label></input>
<input type="radio" name="hatest_fruit" id="h4" value="榴槤">
<label for="h4">榴槤</label></input>
<input type="radio" name="hatest_fruit" id="h5" value="木瓜">
<label for="h5">木瓜</label></input>
</div>
<p>請選擇最常吃的水果 (複選) :</p>
<
div>
<input type="checkbox" name="often_fruit" id="o1" value="芭樂">
<label for="o1">芭樂</label></input>
<input type="checkbox" name="often_fruit" id="o2" value="香蕉">
<label for="o2">香蕉</label></input>
<input type="checkbox" name="often_fruit" id="o3" value="葡萄">
<label for="o3">葡萄</label></input>
<input type="checkbox" name="often_fruit" id="o4" value="榴槤">
<label for="o4">榴槤</label></input>
<input type="checkbox" name="often_fruit" id="o5" value="木瓜">
<label for="o5">木瓜</label></input>
</div><br><br>
<button id="ok">確定</button>
jQuery 部分 :
$("#ok").button();
$("input").checkboxradio();
$("
div").
buttonset();
$("#ok").click(function(e) {
var hatest_fruit=$("[name=hatest_fruit]:radio:checked").val();
var arr=[];
$("[name=often_fruit]:checkbox:checked").each(function(){
arr.push($(this).val());
});
var often_fruit=arr.join();
var msg="您最討厭的水果是 : " + hatest_fruit + "\n" +
"您最常吃的水果是 : " + often_fruit;
alert(msg);
});
此例結合了 checkboxradio 與 buttonset 功能, 讓 radio/checkbox 能在美化視覺效果外還能保持原始 HTML 介面.
Checkradio 提供選項, 方法, 以及事件對 radio/checkbox 進行操控, 常用選項如下表 :
| 常用 option | 說明 |
| classes | 對 ui-checkbox 樣式 class 指定額外樣式 |
| disabled | 不可用狀態 (true/false, 預設 false) |
| icon | 是否要顯示 radio/checkbox 圖像 (true/false, 預設 false) |
常用方法如下表 :
| 常用 method | 說明 |
| option | 取得或設定選項之值 |
| disable | 禁能 (等於 disabled 屬性=True) |
| enable | 致能 (等於 disabled 屬性=False) |
| refresh | 更新元件之視覺狀態 (checked 或 disabled) |
常用方法如下表 :
| 常用 event | 說明 |
| create | 建立物件時觸發 |
例如 :
測試 5 : CheckboxRadio 測試 : 選項與方法 [看原始碼]
HTML 部分 :
<p>請選擇最討厭的水果 (單選) :</p>
<div>
<input type="radio" name="hatest_fruit" id="h1" value="芭樂">
<label for="h1">芭樂</label></input>
<input type="radio" name="hatest_fruit" id="h2" value="香蕉">
<label for="h2">香蕉</label></input>
<input type="radio" name="hatest_fruit" id="h3" value="葡萄">
<label for="h3">葡萄</label></input>
<input type="radio" name="hatest_fruit" id="h4" value="榴槤">
<label for="h4">榴槤</label></input>
<input type="radio" name="hatest_fruit" id="h5" value="木瓜">
<label for="h5">木瓜</label></input>
</div>
<p>請選擇最常吃的水果 (複選) :</p>
<div>
<input type="checkbox" name="often_fruit" id="o1" value="芭樂">
<label for="o1">芭樂</label></input>
<input type="checkbox" name="often_fruit" id="o2" value="香蕉">
<label for="o2">香蕉</label></input>
<input type="checkbox" name="often_fruit" id="o3" value="葡萄">
<label for="o3">葡萄</label></input>
<input type="checkbox" name="often_fruit" id="o4" value="榴槤">
<label for="o4">榴槤</label></input>
<input type="checkbox" name="often_fruit" id="o5" value="木瓜">
<label for="o5">木瓜</label></input>
</div><br><br>
<button id="ok">確定</button>
<button id="
usable">Enable</button>
<button id="
icon">Show Icon</button>
jQuery 部分 :
var config={
disabled: true,
icon: false,
classes: {"ui-checkboxradio": "highlight"}
};
$("input").checkboxradio(config);
$("#ok").button();
$("#usable").button();
$("#usable").click(function(e) {
var isDisabled=$("input").checkboxradio("option", "disabled");
if (isDisabled) { //現在是不可用狀態
$("input").checkboxradio("enable");
$("#usable").html("Disable");
}
else { //現在是可用狀態
$("input").checkboxradio("disable");
$("#usable").html("Enable");
}
});
$("#icon").button();
$("#icon").click(function(e) {
var haveIcon=$("input").checkboxradio("option", "icon");
if (haveIcon) { //現在有圖樣
$("input").checkboxradio("option", "icon", false);
$("#icon").html("Show icon");
}
else { //現在無圖樣
$("input").checkboxradio("option", "icon", true);
$("#icon").html("Hide icon");
}
});
$("#ok").button();
$("#ok").click(function(e) {
var hatest_fruit=$("[name=hatest_fruit]:radio:checked").val();
var arr=[];
$("[name=often_fruit]:checkbox:checked").each(function(){
arr.push($(this).val());
});
var often_fruit=arr.join();
var msg="您最討厭的水果是 : " + hatest_fruit + "\n" +
"您最常吃的水果是 : " + often_fruit;
alert(msg);
});
此例設置了 id=usable 與 id=icon 兩個按鈕, 在選項物件 config 中將選項 disable 設為 true, icon 設為 false, 故預設 radio/checkbox 均無圖像且均不可用, 故 usable 按鈕預設顯示 "Enable", 而 icon 按鈕預設為 "Show icon", 按下這兩個按鈕會使 radio/checkbox 恢復為可用, 以及顯示圖像, 同時 usable 與 icon 按鈕上的文字也會隨之反覆變化.
