用Javascript制作复选框

我们在制作调查表时,往往要限制用户的选择复选框的数量,如象本例中要求用户在九个网站中选择三个(见下图)认为最好的网站,这就要求用户选择的网站数不能大于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 (Num<MaxSelected) //如果已选择的网站数量没有满足要求,则弹出提示框。

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

}

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

时间: 2024-10-27 22:02:02

用Javascript制作复选框的相关文章

javascript实现复选框超过限制即弹出警告框的方法

 这篇文章主要介绍了javascript实现复选框超过限制即弹出警告框的方法,涉及复选框及警告框的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了javascript实现复选框超过限制即弹出警告框的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <html> <tit

javascript判断复选框是否选中的方法_javascript技巧

之前总结了一下关于jquery如何判断复选框是否选中的问题,今天总结如何判断js复选框是否选中 javascript判断复选框是否选中,下面通过例子来说明(现在有如下的一组复选框): <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="o

javascript实现复选框超过限制即弹出警告框的方法_javascript技巧

本文实例讲述了javascript实现复选框超过限制即弹出警告框的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>javascript实现复选框超过限制即弹出警告框的方法</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!--// function countChoices(obj) { max = 2; box1 = obj.form.box1.

javascript实现复选框选中属性_javascript技巧

熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了.今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解. 如果你从事web开发并且在你开发的网页中有复选框,你可能需要判断当前该复选框是否选中,进而执行一些条件语句.有很多种方法来判断一个复选框是否选中. 让我们先来看看原生的javascr

JavaScript限定复选框的选择个数示例代码_javascript技巧

有10个复选框,用户最多只能勾选3个,否则就灰掉所有复选框. (用户再次勾掉复选框时,仍然可以再次选择.) 将可变的部分设置为JS的参数,以实现代码复用. JS代码 第一个参数为复选框的name,第二个参数为最多允许的勾选值. 复制代码 代码如下: function choicetest(name,num){ var choicearr = document.getElementsByName(name); var a=0; for(var i=0;i<choicearr.length;i++)

通过js来制作复选框的全选和不选效果_javascript技巧

复制代码 代码如下: <html> <head> <title>制作全选效果</title> <script language="javascript"> function selectAll(){ allcheckBoxs=document.getElementsByName("a"); var a2=document.getElementsByName("a1"); if(a2[0]

关于javascript控制复选框全选,必须选一个,控制个数代码

<script type="text/javascript教程"> function check() {     var f=document.getelementbyid("form1");     var obj=document.getelementsbyname("user");     for(var i=0;i<obj.length;i++)     {         if(obj[i].checked==true

Javascript检查复选框checkbox是否选中

  假设网页上有个名为form1的form,form里面有一个名为checkbox1的checkbox  代码如下   var f = document.form1; var sum=0; if (f.checkbox1.length){   for(var i=0;i <f.checkbox1.length;i++){     if(f.checkbox1[i].checked==true)       sum=sum+1;   } }else{   if(f.checkbox1.checke

javascript关于复选框的实用脚本代码_javascript技巧

休闲娱乐   书籍及杂志   音乐及影碟   旅游