📄 tu6.9.htm
字号:
<HTML>
<HEAD>
<TITLE>使用单选框与复选框</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function checkAll() //此函数用于选中所有复选框。
{
with(document.form1)
{
for(i=0;i<length;i++)
if(elements[i].type=="checkbox")
elements[i].checked=true;
}
}
function checkIt(obj) //此函数用于选中与数量框相对应的复选框。
{
index=obj.name.charAt(3);
/* 由于数量文本框的名称都是 numx，其中 x 是数字，因此可以用这种方式获得相应复选框的索引。charAt() 是 String 对象的方法，用于获得指定位置的字符。*/
eval("if(document.form1.check"+index+".checked==false)document.form1.check"+index+".checked=true");
/* eval() 函数的作用是将字符串作为 JavaScript 语句执行。*/
}
function mybuy()
{
with(document.form1)
{
for(i=0;i<length;i++)
if(elements[i].name=="card") // 找到第一个信用卡单选框。
break;
for(j=0;j<4;j++)
if(elements[i++].checked==true) // 找到选中的信用卡单选框在小组中的索引。
break;
switch(j)
{
case 0:
var cardStr="VISA";break;
case 1:
cardStr="MasterCard";break;
case 2:
cardStr="招行一卡通";break;
default:
cardStr=myCard.value;
}
}
newWin=open("","","width=500,height=450")
newWin.document.write("您使用卡号为"+document.form1.cardNum.value+"的"+cardStr+"购买了以下产品：<P>")
for(i=0;i<document.form1.length;i++)
if((document.form1.elements[i].type=="checkbox")&&(document.form1.elements[i].checked==true))
{
index=document.form1.elements[i].name.charAt(5);
/* 由于复选框的名称都是 checkx，其中 x 是数字，因此可以用这种方式获得数字文本框的索引。*/
num=eval("document.form1.num"+index+".value");
newWin.document.write(document.form1.elements[i].value+" "+num+" 件<P>");
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form1>
<H2 align=center>产品列表</H2>
<TABLE> <!-- 使用表格协助排版。 -->
<TR>
<TD><INPUT type=checkbox name=check1 id=myCheck1 value="产品 A"><LABEL for=myCheck1> </LABEL>
<!-- 是 HTML 特殊字符中的空格，此处使用它是为了使用户获得更好的操作感觉，因为只需单击复选框或空格所在位置即可设置复选框状态。-->
<TD>数量：<INPUT size=2 name=num1 value=1 onfocus=this.select() onchange=checkIt(this);>
<!-- 单击数量框时即选中其中数字，以便修改；如果更改了其中的数字，则自动使相应复选框成为选中状态（如果尚未选中）。-->
<TD> 产品 A……
<TR>
<TD><INPUT type=checkbox name=check2 id=myCheck2 value="产品 B"><LABEL for=myCheck2> </LABEL>
<TD>数量：<INPUT size=2 name=num2 value=1 onfocus=this.select() onchange=checkIt(this)>
<TD> 产品 B……
<TR>
<TD><INPUT type=checkbox name=check3 id=myCheck3 value="产品 C"><LABEL for=myCheck3> </LABEL>
<TD>数量：<INPUT size=2 name=num3 value=1 onfocus=this.select() onchange=checkIt(this)>
<TD> 产品 C……
<TR>
<TD><INPUT type=button name=allCheck value="全选" onClick="checkAll();">
<!-- 单击"全选"按钮可以选中所有复选框。-->
<TR>
<TD><INPUT type=reset value="重选">
</TABLE>
<H3>请选择您使用的信用卡种类：</H3>
<INPUT type=radio name=card id=card1 checked><LABEL for="card1">VISA</LABEL>
<INPUT type=radio name=card id=card2><LABEL for="card2">MasterCard</LABEL>
<INPUT type=radio name=card id=card3><LABEL for="card3">招行一卡通</LABEL>
<INPUT type=radio name=card id=card4><LABEL for="card4">其他</LABEL>
<INPUT name=myCard>
<P>
请输入您的信用卡号：
<INPUT name=cardNum><P>
<DIV align=center>
<INPUT type=submit value="购买" onClick="mybuy()">
</DIV>
</FORM>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -