2009年11月4日 星期三

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);
}

沒有留言:

張貼留言