多筆checkbox(勾選、取消勾選)的顯示、動作、維護範例

來源:互聯網
上載者:User

許多人在小鋪中問到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>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.