反正 LUNA 抽不到，來教大家寫程式好了～(=_=)
[程式目的]
按一個 Button 後，在 Client 端直接將 CheckBoxList 裡全部的 CheckBox 勾起來。
按一個 Button 後，在 Client 端直接將 CheckBoxList 裡全部的 CheckBox 取消勾選。
[Solution]
用 Javascript 來做。
為何不做在 asp.net 後端程式裡呢？因為 asp.net 後端程式要呼叫 Server 才能執行！
假設 HTML 畫面裡有放其他像 TextBox 之類的物件，程式一但呼叫 Server 做了 page reload 的動作，就會把這些 TextBox 的內容還原或清空，page reload 後還想保留已輸入的值會變很困難的程式 (對規仔而言啦！)。
所以用 Javascript 直接在 Client 端做！
[秘笈]
1. asp.net 的 CheckBoxList 其實是一個 Table，所以「全選」或「全部取消」要針對 Table 來設計！
2. 勾選 CheckBoxList 要將其 checked 設為 true，反之設為 false。
(什麼？這是常識嗎？囧)
以下提供一個範例 (CheckBoxList 裡的值是動態從 DB 裡撈出)：
--------------------------------------------------範例開始--------------------------------------------------
程式檔案：
test.aspx
test.aspx.cs (用在 vb.net 也通啦！)
test.aspx 裡的物件：
1. input button 一個，value="全選" onclick="SetCheckBoxListChecked('chkItem',true)"
(提醒：true 和 false 一定要小寫)
2. input button 一個，value="全部取消" onclick="SetCheckBoxListChecked('chkItem',false)"
3. CheckBoxList 一個，設一列有 8 欄、橫著長 (RepeatColumns="8" RepeatDirection="horizontal")
程式碼：
寫在 .aspx 的 head 裡：
<head>
<script language="Javascript1.2">
<!--
function SetCheckBoxListChecked(checkBoxID,true_or_false)
{
//找到畫面裡名稱與傳入參數 (checkBoxID) 一樣名稱的 table
var table = document.getElementById(checkBoxID);
//table 有幾列就跑幾次
for(i=0;i<table.rows.length;i++)
{
//因不知如何用 javascript 讀欄位數，
//所以直接寫規仔在 CheckBoxList 設的欄位數 (就是 8)
for(j=0;j<8;j++)
{
//有可能最後一列不是 8 欄都有資料，
//所以判斷若 table 裡已沒 checkbox 則中斷
if (!table.rows[i].cells[j].childNodes[0])
{
break;
}else
{
//如果 table 裡有 checkbox 就勾起來
table.rows[i].cells[j].childNodes[0].checked = true_or_false;
}
}
}
}
//-->
</script>
</head>
寫在 .aspx 的 body 的 form 裡：
<body>
<form id="form1" runat="server">
<input type="button" value="全選" onclick="SetCheckBoxListChecked('chkItem',true)">
<input type="button" value="全部取消" onclick="SetCheckBoxListChecked('chkItem',false)">
<asp:CheckBoxList ID="chkItem" runat="server" DataTextField="資料值" DataValueField="資料值" RepeatColumns="8" RepeatDirection="horizontal">
</asp:CheckBoxList>
</form>
</body>
寫在 .aspx.cs 的 page_load 裡：把資料值從DB抓出來加到 CheckBoxList 裡！
--------------------------------------------------範例結束--------------------------------------------------
如果 CheckBoxList 沒有設欄位數，那：
<asp:CheckBoxList ID="chkItem" runat="server" DataTextField="資料值" DataValueField="資料值" RepeatColumns="8" RepeatDirection="horizontal">
會變成：
<asp:CheckBoxList ID="chkItem" runat="server" DataTextField="資料值" DataValueField="資料值">
Javascript 也要改成更簡單的寫法：
function SetCheckBoxListChecked(checkBoxID,true_or_false)
{
var table = document.getElementById(checkBoxID);
for(i=0;i<table.rows.length;i++)
{
//無論第幾列，反正都抓第一欄就對了
table.rows[i].cells[0].childNodes[0].checked = true_or_false;
}
}
這樣就完成了！簡單吧？～XD
其實一點都不簡單～(Q皿Q)
不會寫 Javascript 的規仔可是找了數小時才找到解法的～囧
網路上的資訊好少，大家都喜歡用 GridView 去做，程式的世界變得好複雜...QQ
留言列表
喜怒哀樂與生活 (16)