用Javascript制作复选框

【 tulaoshi.com - Web开发 】

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

　　本例效果的制作方法如下：

　　1、制作一个含有复选框的表单。所有复选框的name（名称）参数要统一，以序号区分，以便程序调用。如本例的复选框名称为：c1、c2、c3......c9。

　　2、把下面这段程序插在head与/head之间，这段程序代码如下：

script language="Javascript"!--var checkboxname = "c"; //复选框名称的前缀，所有复选框的名称要统一，用序号区分。var MaxCheckbox = 9; //复选框的个数，本例有9个，可根据需要变动。var MaxSelected = 3; //设置最大允许选择的数量，可根据需要变动。var Num = 0; //声明一个变量，用于存放已选的数量。function mycheck(ctrl) { //控制选择数量的函数。var nowCtrl; //当前复选框。Num = 0; //统计数归零。var i;i = 1;while ((i = MaxCheckbox) && (Num = MaxSelected)) { //循环检测已选中的复选框数量。nowCtrl = eval("ctrl.form." + checkboxname + i);if ((nowCtrl.checked)) { //如果已被选中，则计算器加1。Num++;}i++;}if (Num  MaxSelected) { // 检查是否已超过了最大选择数量；ctrl.checked = false; //如果已超过允许的最大选择数量，则取消增加的选择并弹出提示窗口。alert("你已选择了三个网站！只有取消（再次点击）已选网站才能选其它网站。");}}// --/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 (NumMaxSelected) //如果已选择的网站数量没有满足要求，则弹出提示框。

　　alert("你只选了"+Num+"个网站，还需再选"+(MaxSelected-Num)+"个网站才能提交，谢谢合作！");

　　}

　　然后在提交选单按钮的标记中加上一个事件：onclick="cnasubmit()"来调用检测程序，若不满足要求的选择数量，则弹出一个提示框，并在提示框中显示已选择的网站数和还增加的选择网站数，你看，这样是不是更贴近用户一些。