还是一个关于checkbox的一个普通的效果，就是根据你勾选的checkbox,列出你选择了哪些值
演示代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>根据选择的checkbox列出选择的值--中国asp之家</title> <style> p,div,body,td,input,checkbox,button{font-size:9pt;} </style> <script language="vbScript"> function vbtrim(str) vbtrim=trim(str) end function function vbisnumeric(iVar) vbisnumeric=not isnumeric(iVar) end function </script> <script language="javascript"> <!-- var chkval=new Array(); var curstr =0; function checktable() { if(typeof(form1.wtfs.length)=="undefined") alert('数目不够，无法继续。'); // One Checkbox err wtab.style.visibility="visible"; // display table var wtfsmc=""; chkval[curstr]=""; for(i=0;i<form1.wtfs.length;i++) { if (form1.wtfs[i].checked) { wtfsmc+=vbtrim(form1.wtfs[i].nextSibling.nodeValue)+","; chkval[curstr]+=vbtrim(form1.wtfs[i].value)+","; form1.wtfs[i].checked=false; form1.wtfs[i].disabled=1; } } if (wtfsmc!="") { wtfsmc=wtfsmc.substring(0,wtfsmc.length-1) chkval[curstr]=chkval[curstr].substring(0,chkval[curstr].length-1) addtr(wtfsmc,curstr); curstr++; } } function addtr(mc,iIndex) { //wtfsmc=obj.nextSibling.nodeValue; // checkbox后面的文字 iRow=wtab.rows.length; if (iRow==1) // xuhao value { xuhao=1 } else { xuhao=parseInt(wtab.rows[iRow-1].cells[0].innerText)+1; } if (form1.ynlj.checked) // 是否 { shifou="<font color=green>是</font>"; } else { shifou="<font color=blue>否</font>"; } czuo="[ <a href=# onclick='javascript:deltab("+iIndex+",event.srcElement.parentElement.parentElement.rowIndex)'>删除</a> ]"; myNewRow =wtab.insertRow(); // insert TR row for (j=0; j <wtab.rows(iRow-1).cells.length; j++) { myNewCell = wtab.rows[iRow].insertCell(j) ; // insert TD cecll of TR collection switch(j) { case 0: wtab.rows[iRow].cells(j).innerHTML = xuhao+" "; wtab.rows[iRow].cells(j).align="right"; break; case 1: wtab.rows[iRow].cells(j).innerHTML = " "+mc; wtab.rows[iRow].cells(j).align="left"; break; case 2: wtab.rows[iRow].cells(j).innerHTML =" "+ shifou; wtab.rows[iRow].cells(j).align="left"; break; case 3: wtab.rows[iRow].cells(j).innerHTML = czuo; wtab.rows[iRow].cells(j).align="center"; wtab.rows[iRow].cells(j).attachEvent ('onmouseover',SetColor_1); wtab.rows[iRow].cells(j).attachEvent ('onmouseout', SetColor_2); break; } } } function deltab(chkid,iIndex) { wtab.deleteRow(iIndex); for(i=0;i<chkval[chkid].length;i++) { if(chkval[chkid].substr(i,1)!=",") { idx=parseInt(chkval[chkid].substr(i,1)); for(j=0;j<form1.wtfs.length;j++) { if (form1.wtfs[j].value==idx) { form1.wtfs[j].disabled=0; } } } } } function SetColor_1() { var td=event.srcElement; td.bgColor="#0099FF"; return true; } function SetColor_2() { var td=event.srcElement; td.bgColor=""; return true; } //--> </script> </head> <body> <form name=form1> <table border="1" width="100%" bordercolorlight="#006699" cellspacing="0" bordercolordark="#FFFFFF"> <tr> <td width="100%"> <div align="center"> <center> <table border="0" width="98%" cellspacing="0" cellpadding="2"> <tr> <td width="100%" colspan="3"></td> </tr> <tr> <td width="107" rowspan="7" bgcolor="#EEEEEE" style="border: 1 solid #D8D8D8"> <br> </td> <td colspan="2" width="100%"> </td> </tr> <tr> <td colspan="2" align="left" width="100%"> <hr width="95%" size="1" color="#808080"> </td> </tr> <tr> <td width="2%"></td> <td width="98%" rowspan="5" valign="top"> <table border="0" width="100%" cellspacing="0" cellpadding="2" bgcolor="#fffffa"> <tr> <td width="66%"><fieldset><table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="33%"> <input type="checkbox" value="0 " name="wtfs">莫名其妙</td> <td width="33%"> <input type="checkbox" value="1 " name="wtfs">乱七八糟</td> <td width="34%"> <input type="checkbox" value="2 " name="wtfs">小键盘</td> </tr> <tr> <td width="33%"> <input type="checkbox" value="3 " name="wtfs">电话号码</td> <td width="33%"> <input type="checkbox" value="4 " name="wtfs">任我行吗</td> <td width="34%"> <input type="checkbox" value="5 " name="wtfs">自助快餐</td> </tr> <tr> <td width="33%"> <input type="checkbox" value="6 " name="wtfs">其它委托</td> <td width="33%"> <input type="checkbox" value="7 " name="wtfs">远程接入</td> <td width="34%"> <input type="checkbox" value="8 " name="wtfs">黎明天亮</td> </tr> <tr> <td width="33%"> </table></fieldset></td> <td width="34%" valign=top><fieldset><input type="checkbox" value="0" name="ynlj">按累计交易额计算<br><br> <img src="btn.gif" name=Image1 width="100" height="26" border=0 id="Image1" style="cursor:hand" onclick="javascript:checktable()"><br> <table border="0" width="20%" cellspacing="0" cellpadding="0"><tr><td width="100%" height=6></td></tr></table></fieldset></td> </tr> <tr> <td width="100%" colspan="2"> <div align="center"> <center> <table id=wtab border="1" width="99%" cellspacing="0" bordercolorlight="#336699" bordercolordark="#FFFFFF" cellpadding="1" style="visibility: hidden"> <tr bgcolor=#F9E486> <td width="10%" align="center">序号</td> <td width="40%" align="center">委托方式</td> <td width="30%" align="center">是否按累计交易额计算</td> <td width="30%" align="center">操作选项</td> </tr> </table> </center> </div> </td> </tr> </table> </td> </tr> <tr> <td width="2%"></td> </tr> <tr> <td width="2%"></td> </tr> <tr> <td width="2%"></td> </tr> <tr> <td width="2%"></td> </tr> <tr> <td colspan="3" width="100%"> <hr width="98%" size="1" color="#808080"> </td> </tr> <tr> <td width="100%" colspan="3" align=right> <table border="0" width="80%" cellspacing="0"> </table><br> </td> </tr> </table> </center> </div> </td> </tr> </table> </form> </body> </html> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...