应该是挺简单的代码, 记录一下分享.

首先最直接的想法就是使用循环, 用局部变量记录已选的checkbox, 达到最大值就将余下的checkbox都禁止选择, 例如以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS限制checkbox复选框多选</title>
<script language="javascript" type="text/javascript">
function onCheckBox(checkbox)
{
var items = document.getElementsByName("item");
var maxChoices = 3;
var flag = 0; for(var i=0; i<items.length; i++)
{
if(items[i].checked)
{
flag ++;
}
}
if(flag >= maxChoices)
{
for(var k=0; k<items.length; k++)
{
if(!items[k].checked)
{
items[k].disabled = true;
}
}
}
else
{
for(var p=0; p<items.length; p++)
{
if(!items[p].checked)
{
items[p].disabled = false;
}
}
}
} function onSubmitVote()
{
var items = document.getElementsByName("item");
var choices = 0;
var maxChoices = 3; for(var j=0; j<items.length; j++)
{
if(items[j].checked)
{
choices ++;
}
}
if(choices == 0)
{
alert("请选择选项再提交");
}
else if(choices > maxChoices)
{
alert("选择选项不能超过 "+ maxChoices + "个");
}
else
{
alert("提交成功");
}
} </script>
</head>
<body >
JS限制checkbox复选框多选
<br><br> <input type="checkbox" value="value1" name="item" onClick="onCheckBox(this);"/> 选项一
<br>
<input type="checkbox" value="value2" name="item" onClick="onCheckBox(this);"/> 选项二
<br>
<input type="checkbox" value="value3" name="item" onClick="onCheckBox(this);"/> 选项三
<br>
<input type="checkbox" value="value4" name="item" onClick="onCheckBox(this);"/> 选项四
<br>
<input type="checkbox" value="value5" name="item" onClick="onCheckBox(this);"/> 选项五
<br><br> <input type="button" id="submit_vote" name="submit_vote" value="提交" onClick="onSubmitVote()" /> </body>
</html>

执行例如以下:

效果是没问题, 但通常第一想法都是比較粗糙的, 好的东西须要加以雕琢. 上面用的的是局部变量, 所以每次进入js的onCheckBox()都是新的变量, 还要循环几次, 但换成全局变量, 每次进入, flag的值都是继续上次操作的值, 那么能够降低循环的次数了. 针对该部分做改动, 例如以下:

<script language="javascript" type="text/javascript">
var maxChoices = 3;
var flag = 0; function onCheckBox(checkbox)
{
var items = document.getElementsByName("item");
//var maxChoices = 3;
//var flag = 0; if(checkbox.checked)
{
flag ++;
}
else
{
flag --;
} if(flag < maxChoices)
{
for(var i=0; i<items.length; i++)
{
if(!items[i].checked)
{
items[i].disabled = false;
}
}
}
else
{
for(var i=0; i<items.length; i++)
{
if(!items[i].checked)
{
items[i].disabled = true;
}
}
} } function onSubmitVote()
{
var items = document.getElementsByName("item");
var choices = 0;
//var maxChoices = 3; for(var j=0; j<items.length; j++)
{
if(items[j].checked)
{
choices ++;
}
}
if(choices == 0)
{
alert("请选择选项再提交");
}
else if(choices > maxChoices)
{
alert("选择选项不能超过 "+ maxChoices + "个");
}
else
{
alert("提交成功");
}
} </script>

这样效果是一样的, 但循环就少一次.

JS在页面限制checkbox最大复选数的更多相关文章

  1. 在Servlet端获取html页面选中的checkbox值,request获取页面checkbox(复选框)值

    html端代码: 选项框: <input type="checkbox" name="crowd" value="选项一">选项 ...

  2. 【JS新手教程】LODOP打印复选框选中的内容

    在html中,复选框是常见的使用之一,本文介绍如何获取选中的复选框的值,并用LODOP打印.给需要为一组的复选框,复选框的checkbox设置相同的name属性,设置不同的id,然后设置需要的valu ...

  3. 【JS新手教程】LODOP打印复选框选中的任务或页数

    之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务)关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法该文 ...

  4. ionic-CSS:ionic checkbox(复选框)

    ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...

  5. checkbox对齐-复选框图标

    checkbox对齐-复选框图标 一般开发过程中,我们直接使用<input type="checkbox"/>这样出现的复选框,设计师一般都说不好看 而让我们按照设计稿 ...

  6. JSP如何保存页面上众多的复选状态

    一.描述: 最近写的一个问题管理模块,录入问题时需要选择客户(也就是那些客户存在这些问题),当保存完问题后,再次编辑问题时,如何从数据库里读取上次选中的客户并展示位勾选状态呢?问题表cust_ques ...

  7. NopCommerce 3.4中商品详情页面单选框、复选框的美化

    先上图给大家看看效果,点这里打开网站(后期可能会找不到这个商品,现在再测试阶段) 现在你能看到的这个页面中,尺寸.文本描述是单选框(属性是我乱写的名字),上门安装是复选框.效果就看到这里,请君跳过图片 ...

  8. jquery处理checkbox(复选框)是否被选中

    现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能 ...

  9. jquery如何判断checkbox(复选框)是否被选中(转)

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

随机推荐

  1. Android开发进度07

    1,今日:目标:完成记账功能 2,昨天:账单的增删改查方法 3,收获:无 4,问题:SQLite表单出现问题,提交后软件直接退出

  2. php 与 nginx 的两种处理方式

    1.IP:Port 监听方式 php-fpm docker pull PHP:2.4-alpine nginx.conf fastcgi_pass 127.0.0.1:9000; php-fpm 在容 ...

  3. selenium+xpath获取href的坑

    先上HTML文档 <html> <body> <a href="http://www.example.com">Example</a> ...

  4. Ajax得到JSON数据

    Ajax得到JSON数据

  5. List<T>与List<?>的区别

    T 代表某一类型 ? 代表任意类型.. T因为代表是某一确定类型..所以你可以使用它..比如你有个List<T>类型的变量tList 你可以用T t = tList.get(1);也可以用 ...

  6. HAVING使用子查询

    HAVING使用子查询     //查询各部门平均工资,显示平均工资大于   //公司整体平均工资的记录   select deptno,avg(sal)   from emp   group by ...

  7. ZJU 2676 Network Wars

    Network Wars Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Original I ...

  8. HDU 4372

    想了很久,终于想到了.... 向后看到F,向前看到B,假如把N-1个楼分成F+B个组,则把每个组最高的楼作为看到的楼,那么,其实在确定每一组的最高楼时,左边或右边的最高楼的顺序已经确定了.由于是排列数 ...

  9. magento megatron主题加入中文

    magento的megatron默认不支持中文,全部我们须要在它的本地化目录中加入中文的cvs文件,加入方法例如以下: 1.切换至 app ▸ design ▸ frontend ▸ megatron ...

  10. DataTables warning: table id=dataTable - Requested unknown parameter &#39;acceptId&#39; for row 0. For more

    重点内容 DataTables warning: table id=dataTable - Requested unknown parameter 'acceptId' for row 0. For ...