许多人在小铺中问到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>
Microsoft MVP ASP/ASP.NET |
topcat |