中华网--科技频道--网络教室

　用Javascript制作复选框
冯永曜　　黄山村夫　

　　我们在制作调查表时，往往要限制用户的选择复选框的数量，如象本例中要求用户在九个网站中选择三个（见下图）认为最好的网站，这就要求用户选择的网站数不能大于3个，当然可以在后台通过程序来控制，但那样又慢又繁，用Javascript程序在用户端直接控制既快速又方便，在本例的效果中，一旦选择的网站数超过3个，将立即弹出一个提示窗口，告诉你选择的网站数不能超过3个。

本例效果的制作方法如下：
　　1、制作一个含有复选框的表单。所有复选框的“name”（名称）参数要统一，以序号区分，以便程序调用。如本例的复选框名称为：c1、c2、c3......c9。
　　2、把下面这段程序插在<head>与</head>之间，这段程序代码如下：
<script language="Javascript">

</script>

　　在引用本文程序制作表单是要注意的是各复选框的名称，程序默认的是：c1、c2、c3......c9。如果改用其它名称时，要把这句程序：var checkboxname = "c"中的“c”换成你的实际名称前缀，但后面的序号一定要从1开始且要连续，否则程序将要修改。
　　3、在每一个复选框的标记中加上一个：onclick="mycheck(this)"来调用这段Javascript程序，使其每次点击复选框时都用程序检测一遍已被选择的复选框数量并判断是否超过限制的数量。完成后的复选框代码如下（了限于篇幅，仅取三个作示范）：
<input type="checkbox" name="c1" value="300" onclick="mycheck(this)">信息
<input type="checkbox" name="c2" value="400" onclick="mycheck(this)">咨询
<input type="checkbox" name="c3" value="800" onclick="mycheck(this)">投资
　　至此制作完成，在浏览器中就可以看到预期的效果了。若是我们要求用户必须选择三个网站才能提交，那又怎么办？其实很简单，在程序中再增加下面这个检测函数：cnasubmit()，代码如下：
function cansubmit(){ //选择网站数量是否符合要求检测函数。
if (Num<MaxSelected) //如果已选择的网站数量没有满足要求，则弹出提示框。
alert("你只选了"+Num+"个网站，还需再选"+(MaxSelected-Num)+"个网站才能提交，谢谢合作！");
}
　　然后在提交选单按钮的标记中加上一个事件：onclick="cnasubmit()"来调用检测程序，若不满足要求的选择数量，则弹出一个提示框，并在提示框中显示已选择的网站数和还增加的选择网站数，你看，这样是不是更贴近用户一些。

　赛迪网　

进入BBS

进入聊天室

关闭窗口

﹣更多本栏目内容
??Windows 2000系统安全设置攻略 ??Dreamweaver编写CSS需要掌握的技巧 ??使用Flash MX过程中的3个小技巧 ??拖IE9网站图标到Win7任务栏精彩好礼任你拿 ??从此不再耗流量？Google离线地图试用 ??给瑞星添加移动存储自动杀毒功能 ??一周壁纸榜单靓丽风景伴您欢度周末 ??金山网络七款软件齐升级炫丽界面贺新春 ??提升网站流量和权重百度热榜排第一 ☉预警：电商促销引钓鱼七夕网购需谨慎

本站检索

网络教室编辑信箱