多筆checkbox(勾選、取消勾選)的顯示、動作、維護範例
許多人在小舖中問到checkbox這個Form物件在多筆的維護上要如何使用
這裡提供一個小喵的作法
A.顯示資料：
1.顯示資料的時候，放個隱藏的Input,存放Key值
2.在checkbox的旁邊放個隱藏的Input,存放資料庫中該欄位的值
3.checkbox中，依照資料庫中的值判斷是否需要勾選(checked)
B.處理勾選動作：
1.透過JavaScript處理
2.當勾選時，相對隱藏的Input的value改為Y
3.當不勾選時，相對隱藏的Input的value改為N
t1.asp代表顯示資料
<% Response.CacheControl = "no-cache" %>
<% Response.AddHeader "Pragma", "no-cache" %>
<% Response.Expires = -1 %>
<% Response.Buffer = true%>
<%
Dim OrgData(2,10)
For y = 1 to 10
OrgData(1,y) = "Key" & Y
OrgData(2,y) = "N"
Next
OrgData(2,3) = "Y"
OrgData(2,6)="Y"
'用一個陣列來模擬從資料庫中撈取的資料
'其中第3,6筆資料是Y(選取)，其他為未選取
'********************************************
'透過隱藏的INPUT來記錄每筆資料的Key與勾選或取消勾選後的值
'送出後，直接取得INPUT的值來做資料庫的維護即可
%>
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="css/css1.css" temp_href="css/css1.css">
<style>
.dh{font-size:14;color:yellow;background-color:blue}
.dl{font-size:12}
</style>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<TITLE><%=Title%></TITLE>
<SCRIPT src=js/public.js>
<!--
// Include公用JavaScript程式
//-->
</SCRIPT>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--
function window_onload(){
}
function chkItm_onclick(idx){
var chkItm=window.document.form1.chkItm;
var hidItm=window.document.form1.hidItm;
if(isNaN(chkItm.length))
{
//代表只有一個check的處理(chkItm只有一項，非陣列處理)
if(chkItm.checked)
{
//代表勾選
hidItm.value='Y';
}
else
{
//代表取消勾選
hidItm.value='N';
}
}
else
{
//代表只有一個以上check的處理(chkItm只有超過一個，陣列處理)
if(chkItm[idx].checked)
{
//代表勾選
hidItm[idx].value='Y';
}
else
{
//代表取消勾選
hidItm[idx].value='N';
}
}
}
function btnHid_onclick() {
var hidItm=window.document.form1.hidItm;
var hidKey=window.document.form1.hidKey;
if(isNaN(hidItm.length))
{
hidItm.type='hidden';
hidKey.type='hidden';
}
else
{
for(var i=0;i<hidItm.length;i++)
{
hidItm[i].style.display='none';
hidKey[i].style.display='none';
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY bgproperties=fixed bottommargin=0 leftmargin=0 rightmargin=0 topmargin=0 onload="return window_onload()" bgcolor=LightSkyBlue>
<FORM action="t2.asp" method="post" id="form1" name="form1">
顯示原始資料：
<table border=1 bgcolor=pink>
<tr>
<th class=dh>原始資料</th>
<th class=dh>維護</th>
</tr>
<tr>
<td>
<table border=1 bgcolor=LightCyan>
<%For y = 1 to UBound(OrgData,2)%>
<tr>
<%For x =1 to UBound(OrgData,1)%>
<td class=dl><%=OrgData(x,y)%></td>
<%Next%>
</tr>
<%Next%>
</table>
</td>
<td>
<table border=1 bgcolor=LightCyan>
<tr>
<th class=dh>Key</th>
<th class=dh>勾選(全選)</th>
</tr>
<%For y = 1 to UBound(OrgData,2)%>
<tr>
<td class=dl>
<%=OrgData(1,y)%>
<!--正式執行時，改成隱藏text→hidden-->
<INPUT type="text" id=hidKey name=hidKey value="<%=OrgData(1,y)%>">
</td>
<td class=dl>
<INPUT type="checkbox" id=chkItm name=chkItm
<%If OrgData(2,y) = "Y" Then'當資料為Y,則勾選%> checked<%End If%>
onclick="chkItm_onclick(<%=y-1%>)"
>
<!--正式執行時，改成隱藏text→hidden-->
<INPUT type="text" id=hidItm name=hidItm value="<%=OrgData(2,y)%>">
</td>
</tr>
<%Next%>
</table>
</td>
</tr>
</table>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="button" value="隱藏Input" id=btnHid name=btnHid LANGUAGE=javascript onclick="return btnHid_onclick()">
</FORM>
</BODY>
</HTML>
<%@ Language=VBScript CODEPAGE=950%>
<% Response.CacheControl = "no-cache" %>
<% Response.AddHeader "Pragma", "no-cache" %>
<% Response.Expires = -1 %>
<% Response.Buffer = true%>
<%
Dim RltData
ItmCnt=Request.Form("hidKey").Count
ReDim RltData(2,ItmCnt)
For y = 1 to ItmCnt
RltData(1,y) = Request.Form("hidKey").Item(y)
RltData(2,y) = Request.Form("hidItm").Item(y)
Next
%>
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="css/css1.css" temp_href="css/css1.css">
<style>
.dh{font-size:14;color:yellow;background-color:blue}
.dl{font-size:12}
</style>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<TITLE><%=Title%></TITLE>
<SCRIPT src=js/public.js>
<!--
// Include公用JavaScript程式
//-->
</SCRIPT>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--
function window_onload()
{
}
//-->
</SCRIPT>
</HEAD>
<BODY bgproperties=fixed bottommargin=0 leftmargin=0 rightmargin=0 topmargin=0 onload="return window_onload()" bgcolor=LightSkyBlue>
<FORM action="" method="post" id="form1" name="form1">
接收送出的結果為
<table border=1 bgcolor=LightCyan>
<%For y2=1 to UBound(RltData,2)%>
<tr>
<%For x2=1 to UBound(RltData,1)%>
<td class=dl><%=RltData(x2,y2)%></td>
<%Next%>
</tr>
<%Next%>
</table>
</FORM>
</BODY>
</HTML>
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |