mrkt 的程式學習筆記: jQuery 取得CheckBoxList裡項目有被選取(Checked=true)的值

2011年7月17日星期日

jQuery 取得CheckBoxList裡項目有被選取(Checked=true)的值

這算是常常被問到或是有時候總是會忘記的一個基本操作，

前端Script有jQuery加持後，這樣的基本操作就變得相當簡單，而且更加簡潔與優雅，

就讓小弟呈現我所整理的相關內容。

我們就拿上面的CheckBoxList來當做練習的資料內容，這是一個水平方向且每列5個CheckBox呈現的CheckBoxList

(關於這個ASP.NET MVC擴充HtmlHelper而可以顯示HorizontalRepeat功能的CheckBoxList，可以參考此篇文章)

範例一：

通常十個人裡面會有七八個人是用以下的方法來取得CheckBoxList裡Checked=true的值，而這種方法是最為直覺，

但也是效能最不好，而且寫法也最為瑣碎，所以這是最不推薦！

  1: var valuelist = ''; 
  2: 
  3: $('input[type=checkbox][name=CheckBoxCities]').each(function() 
  4: {
  5:     if (this.checked) 
  6:     {
  7:         valuelist += $(this).val() + ",";
  8:     }
  9: });
 10: if (valuelist.length > 0) 
 11: {
 12:     valuelist = valuelist.substring(0, valuelist.length - 1);
 13: }

在Firebug中直接執行此寫法，可以得到一個以逗號分隔串接的字串，就是有被選取項目的值，

為什麼會說這樣的方式不好呢？

其實明眼人一眼可以看出來，因為要用each去遍歷整個CheckBoxList所有的項目，

然後一一判斷每個CheckBox是否有被選取，有被選取就串接到字串中，並且後端加上逗號分隔，

最後再把字串中多餘的逗號給移除。

看看這一連串的動作是多麼的瑣碎，其實在一開始的對CheckBox的選取就還可以再精簡一點，

這樣each中就可以少掉要去做 if 判斷的動作，所以就看看下面精簡過的寫法。

範例二：

  1: var valuelist = ''; 
  2: 
  3: $('input:checkbox[name=CheckBoxCities][checked=true]').each(function() 
  4: {
  5:     valuelist += $(this).val() + ",";
  6: });
  7: if (valuelist.length > 0) {
  8: 	valuelist = valuelist.substring(0, valuelist.length - 1);
  9: }
 10: console.log(valuelist);

於selector中去加上選取條件，只挑選出有被選取的checkbox，這樣在each中就不用加上 if 判斷，

當然這樣的改善還不是最好的辦法，因為字串的串接，以及整個步驟結束前還要去移除最後多出來的那個逗號，

在C#中，遇到這樣的狀況要處理時，通常會建立一個字串陣列或其他集合類型，

等字串的都塞到集合後，再用 join 的方式就字串以指定的分隔符號產生串接的字串，

這樣的方法相當方便，而且不用去處理最後多出來的逗號。

在jQuery中也是可以做一樣的操作，所以就看看用陣列以及join 的方式來處理。

範例三：

  1: var checkedValues = new Array();
  2: $('input:checkbox[name=CheckBoxCities][checked=true]').each(function(i, item)
  3: {
  4:    checkedValues.push($(item).val());
  5: });
  6: console.log(checkedValues.join(','));

先建立一個用來放置被選取項目Value的陣列，

然後在each中使用 push 方法，將被選取的Value放到前面所建立的陣列中，

最後就是用 join 方法產生一個以指定分隔符號來串接的字串。

JavaScript push Method

JavaScript join Method

push與join都是JavaScript原本就有的Method。

到這邊看來似乎比一開始的寫法要精簡許多而且也更加優雅一些，

但是…不覺得一開始還要建立一個陣列，然後還需要用到each將資料再放到陣列中方式…還是太過累贅了些…

所以再看看以下的方法。

範例四：

  1: var checkedValue = $('input:checkbox[name=CheckBoxCities][checked=true]').map(function()
  2: { 
  3:     return $(this).val();                     
  4: })
  5: .get().join(',');
  6: console.log(checkedValue);

這邊用了 jQuery.map() 方法，此方法就是「Translate all items in an array or object to new array of items.」

簡言之就是將符合選取器條件所篩選出的元素集合放到一個新的陣列中。

最後在join之前的get()，這是為了「Retrieve the DOM elements matched by the jQuery object.」

jQuery.map()

jQuery .get()

所以到了這個階段可以算是大功告成了，我們精簡到可以說用一行程式就搞定原本需要5行以上的程式，

這樣的寫法看起來就順眼許多了，

其實為了日後可以重複使用，不要每次為了要取得被選取的CheckBox Value就要重寫一次，

我們可以將這一段程式給包起來並建立一個function，

而function傳入CheckBoxList的tagName，function所回傳的資料就是串接好的字串。

範例五：

  1: <script language="javascript" type="text/javascript">
  2: 
  3:   function GetCheckedValue(checkBoxName)
  4:   {
  5:     return $('input:checkbox[name=' + checkBoxName + '][checked=true]').map(function ()
  6:     {
  7:       return $(this).val();
  8:     })
  9:     .get().join(',');
 10:   }
 11: 
 12: </script>