JQuery 取得 checkbox 群組內被選取的項目

在 ASP 程式裡，只需要下 Request("cbox") 語法，就可以將所有 checkbox name="cbox" 的項目內容取回並以逗號(,)區隔。可是在 JQuery 就沒辦法用一行指令來完成了。以下分別使用 jQuery 與 JavaScript 來完成同樣的目的。

首先定義一下情境。

<input type="checkbox" name="pet" value="1"/>
<input type="checkbox" name="pet" value="2"/>
<input type="checkbox" name="pet" value="4"/>

<BR>
<input type="button" value="JQueryclick" OnClick="JQClick()" />
<BR>
<input type="button" value="JSclick"  onclick="JSClick()"  />

一共有三個 checkbox ，都是同樣的 name （pet），另外多了兩個 button，一個是呼叫 jquery 寫法，另一個則是 javascript 。

既然有要使用 jQuery，所以一開始就要記得將 jQuery.js 引用進來：

<script src="jquery.js" type="text/javascript">

接著就需要定義 JQClick() 與 JSClick() 。

JQClick:

function JQClick()
{  
   var str="";  

//$("input[name=pet]:checked") 

//可以先將畫面上 name=pet 且 有被勾選的 checkbox 選出來   

//然後再透過 each ( ) 去分別處理每個被選取的項目
   $("input[name=pet]:checked").each(function(i){str=str+$(this).val()+",";})

//將字串最後一個逗號去除
   if(str.length>0)
     str=str.substr(0,str.length-1);
     alert(str);
}

JSClick:

function JQClick()
{
  var checkedItems=""

  //取得畫面上 name = pet 的元素，他會回傳一個陣列集合
  var ckItems=document.getElementsByName('pet');

  //針對陣列集合的項目逐筆去處理
  for ( var i=0;i

    //如果有被勾選 ，才記錄下來
    if(ckItems[i].checked==true)
    {    
       checkedItems=checkedItems+ckItems[i].value+",";
    }
  }

  if(checkedItems.length>0)                
     checkedItems=checkedItems.substr(0,checkedItems.length-1);

  alert(checkedItems);
}