許多人在小鋪中問到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代表顯示資料
<%@ Language=VBScript CODEPAGE=950%><% 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>
t2.asp帶筆承接送出結果<%@ 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>