恰巧同事問了個問題,覺得蠻有趣的,所以也分享一下。
使用 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 被勾選的文字(二)