多笔checkbox(勾选、取消勾选)的显示、动作、维护范例

最新推荐文章于 2022-07-29 16:09:15 发布

专门虎

最新推荐文章于 2022-07-29 16:09:15 发布

阅读量420

点赞数

文章标签： javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/topcat/archive/2008/06/09/1216299.html

版权

许多人在小铺中问到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 οnlοad="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%>
       οnclick="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 οnclick="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>