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

首先最直接的想法就是使用循环, 用局部变量记录已选的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. myeclipse反编译安装 jd-gui.exe下载

    一:在线安装 1.Help->Install New Site Name:** Location:http://jd.benow.ca/jd-eclipse/update 二:手动安装 1.下载 ...

  2. noip复习之拓扑排序

    之前很多很多紫书上的东西我都忘了…… 抄题解的后果…… 做了一下裸题 https://vjudge.net/problem/UVA-10305 拓扑排序还可以来判环 #include<bits/ ...

  3. 紫书 习题7-14 UVa 307(暴搜+剪枝)

    这道题一开始我想的是在排序之后只在头和尾往中间靠近来找木块, 然后就WA, 事实证明这种方法是错误的. 然后参考了别人的博客.发现别人是直接暴搜, 但是加了很多剪枝, 所以不会超时. 我也想过这个做法 ...

  4. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  5. WEB开发兼容性---浏览器渲染模式—— document.compatMode

    document.compatMode主要是用来判断浏览器采用何种方式渲染,它有两种可能的返回值:BackCompat和CSS1Compat,官方对其解释如下: BackCompat:标准兼容模式关闭 ...

  6. 关于VMNet1、VMNet8、

    关于vmnet1~~~~~vmnet8 2008年04月11日 星期五 23:18 先说vmnet0,实际上就是一个虚拟的网桥,这个网桥有很若干个端口,一个端口用于连接你的Host,一个端口用于连接你 ...

  7. apache rewrite 正則表達式基础

    用了好几次rewrite,用的次数不是非常多,每次都忘,都得又一次上网上找一堆现看,总结一下,以免以后忘了 =====================分隔符===================== ...

  8. 第一个python作业题目以及代码

    1. 编写程序,用户输入一个三位以上的整数,输出其百位以上的数字.例如用户输入1234,则程序输出12.(提示:使用整除运算.) x=input("请输入一个三位以上的数字:") ...

  9. JAVA设计模式之【命令模式】

    命令模式 为了降低耦合度,将请求的发送者和接收者解耦 发送请求的对象只需要哦知道如何发送请求,而不必知道如何完成请求 对请求排队 记录请求日志 支持撤销操作 核心在于引入命令类 角色 抽象命令类Com ...

  10. linux操作系统下完全删除oracle数据库

    1.关掉oracle server 和 background processes ps -ef | grep ora 关掉数据库 shutdown immediate 2.关掉监听 lsnrctl  ...