如何用 jQuery 操作核取方塊 checkbox

這幾天忙著把執行公部門任務的視窗程式改為網頁版, 使用 jQuery UI 做介面, 但一段時間沒玩 jQuery 了, 有些遺忘, 趁著複習之便寫一下 memo, 下次要用時速查即得也. 今天進度之一是要讀取一組 checkbox 的核取狀態, 判別哪些項目被選取了, 作為後續處理之依據, 例如使用者選取了機器一, 那麼後續就只對機器一下命令, 若同時選取了機器一與機器二, 那就依序對兩台機器下命令. 為了方便說明, 下面以水果為例 :

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 [看原始碼]