HTML 部份 :
<p>你最喜歡吃的水果是 :</p>
<input type="checkbox" id="watermelon" name="fruit" value="西瓜">
<label for="watermelon">西瓜</label>
<input type="checkbox" id="banana" name="fruit" value="香蕉">
<label for="banana">香蕉</label>
<input type="checkbox" id="pineapple" name="fruit" value="鳳梨">
<label for="pineapple">鳳梨</label>
<input type="checkbox" id="apple" name="fruit" value="蘋果">
<label for="apple">蘋果</label>
<input type="button" id="ok" value="確定">
<div id="msgbox" title="訊息"></div>
jQuery 部分 :
粗體字部分就是重點, 我們用 each 函式遍歷每一個 checkbox 元素, 判斷其狀態是否為被選取 (checked), 是的話就放入陣列中.
$("#ok").click(function() {
var fruit=new Array();
$("[name=fruit]:checkbox").each(function() {
if (this.checked) {fruit.push(this.value);}
});
if (fruit.length==0) {
$("#msgbox").html("不吃水果容易便秘喲!");
$("#msgbox").dialog("open");
}
else {
$("#msgbox").html("你喜歡吃的水果:" + fruit.join());
$("#msgbox").dialog("open");
}
});
範例 1 : http://tony1966.xyz/test/jquerytest/checkbox_1.htm [看原始碼]
其實核取方塊也可以用 jQueryUI 的 buttonset() 方法改變為按鈕群組, 這時在 checkbox 外面要用一個 div 或 span 元素包起來 :
<div id="fruits">
<input type="checkbox" id="watermelon" name="fruit" value="西瓜">
<label for="watermelon">西瓜</label>
<input type="checkbox" id="banana" name="fruit" value="香蕉">
<label for="banana">香蕉</label>
<input type="checkbox" id="pineapple" name="fruit" value="鳳梨">
<label for="pineapple">鳳梨</label>
<input type="checkbox" id="apple" name="fruit" value="蘋果">
<label for="apple">蘋果</label>
<input type="button" id="ok" value="確定">
<div id="msgbox" title="訊息"></div>
</div>
然後呼叫該 div/span 物件的 buttonset() 方法即可 :
$("#fruits").buttonset();
範例 2 : http://tony1966.xyz/test/jquerytest/checkbox_2.htm [看原始碼]
<div id="fruits">
<input type="checkbox" id="watermelon" name="fruit" value="西瓜">
<label for="watermelon">西瓜</label>
<input type="checkbox" id="banana" name="fruit" value="香蕉">
<label for="banana">香蕉</label>
<input type="checkbox" id="pineapple" name="fruit" value="鳳梨">
<label for="pineapple">鳳梨</label>
<input type="checkbox" id="apple" name="fruit" value="蘋果">
<label for="apple">蘋果</label>
<input type="button" id="ok" value="確定">
<div id="msgbox" title="訊息"></div>
</div>
$("#fruits").buttonset();
範例 2 : http://tony1966.xyz/test/jquerytest/checkbox_2.htm [看原始碼]
沒有留言 :
張貼留言