透過 jQuery 取得 Asp.Net 裡 CheckBoxList 被勾選的文字

恰巧同事問了個問題，覺得蠻有趣的，所以也分享一下。

使用 Asp.Net 的 CheckBoxList，只要你設定好 DataSource 之後，.Net 會自動幫你把所有資料呈現出來，畫面如下所示：

.Net 所產生的網頁原始碼為：

<table id="cb">

<tr>

<td><input id="cb_0" type="checkbox" name="cb$0" value="1" />
<label for="cb_0">paladin</label></td>

</tr><tr>

<td><input id="cb_1" type="checkbox" name="cb$1" value="2" />
<label for="cb_1">ltt</label></td>

</tr><tr>

<td><input id="cb_2" type="checkbox" name="cb$2" value="3" />
<label for="cb_2">lee</label></td>

</tr>

</table>

目前的需求，是要將被勾選項目的文字顯示出來，因為每一個項目都已經被指定了預設的ID，但又不想透過 Server 端去處理以避免觸發 PostBack，所以希望只從前端用 javascript 就能取出有被勾選的項目文字。依上述的 HTML 原始碼，如果要從
<input id="cb_0" type="checkbox" name="cb$0" value="1" />
裡面去取得有被勾選的文字「paladin」真的還有點困難，因為 .Net 所產生的 Html Code 根本就沒有把 「paladin」放到 input 標籤裡。這時，自己為 input 標籤加上自訂的屬性或許是個可行的方法，所以在 CheckBoxList 的 PreRender 事件裡，把項目文字的內容也給他加上去。但是，之後的發展，更是令人意外啊～

protected void cb_PreRender(object sender, EventArgs e)
{
    foreach (ListItem li in cb.Items)
    {       
       li.Attributes["text"] = li.Text;
    }
}

Html Code:

<table id="cb">

 <tr>

  <td><span text="paladin"><input id="cb_0" type="checkbox" name="cb$0" value="1" /><label for="cb_0">paladin</label></span></td>

 </tr><tr>

  <td><span text="ltt"><input id="cb_1" type="checkbox" name="cb$1" value="2" /><label for="cb_1">ltt</label></span></td>

 </tr><tr>

  <td><span text="lee"><input id="cb_2" type="checkbox" name="cb$2" value="3" /><label for="cb_2">lee</label></span></td>

 </tr>

</table>

原先每個 checkbox 相關的 Html Code，現在變成最外層被包了一個 <span> 標籤，而剛剛所加的項目名稱也是被產生在這個<span> 標籤裡。

<span text="paladin">**原先的 checkbox html**</span>

依據上面新的 Html Code，要取出被勾選項目，則可以用 jQuery 的

$("input[type=checkbox]:checked").each(...); 來完成；
 [參考]JQuery 取得 checkbox 群組內被選取的項目

至於要取得項目名稱，則需透過 jquery 的 .parent( ) ，來取得最外一層 <span> 標籤裡的內容了。

於是，我在前端 .aspx 頁面定一了一段 JavaScript Function:

<script>
function ShowData() {             
    var str = "";
    $("input[type=checkbox]:checked").each(function (i) {
        str = str + $(this).parent().attr("text") + ",";
    });
    alert(str);             
}
</script>

ShowData( ) 主要目的，就是取得目前頁面上所有被勾選的 checkbox ，並將他們父親的 text 屬性內容存到 str 變數中，最後並將結果顯示出來。

最後，為了方便測試，替每個 checkbox 加入 onclick 事件：

<script>
$(function () {            
    $("input[type=checkbox]").click(function () { ShowData(); });
});
</script>

經過這番調整後，就可以正確顯示想要的內容了。

這件事，讓我釐清了 Asp.Net 對於 CheckBoxList 於前端所產生的 Html Code，並非如我想像中的單純，他的設計上多了些其他考量，雖然我還沒辦法理解他的用心到底所為何事，但可以確定的是，這問題多花了無辜的使用者好幾個小時在找蟲，也希望有緣人在有幸之年能看到這篇文章後，省去摸索時間，留下來好好去泡泡茶、去看電視、去打電動，不是更有意義嗎？

[補充 20120706]
也可以透過 .next 來處理這問題。可以參考：
透過 jQuery 取得 Asp.Net 裡 CheckBoxList 被勾選的文字(二)