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

首先最直接的想法就是使用循环, 用局部变量记录已选的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. 从YV12到NV12

    Media SDK的decoder,vpp,encoder对输入输出格式有着严格的限制,现在仅仅支持NV12.那么如何从其他格式转化为NV12是日常工作中经常遇到的事情.本篇文章以此为目的,讨论如何将 ...

  2. Python数学实现二元一次方程

    import cmath import math import sys def get_float(msg,allow_zero): x = None while x is None: try: x ...

  3. python中try…except的使用，处理程序异常

    通常情况下,在python中运行程序,多多少少会出现程序异常的问题,try……except能很好的解决程序中的异常.以下是其用法,在不同位置时进行什么样的工作和起到什么样的作用. try: 可能出现异 ...

  4. Vue轮播图插件---Vue-Awesome-Swiper

    轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...

  5. 【 【henuacm2016级暑期训练】动态规划专题 G】 Palindrome pairs

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先用枚举回文串中点的方法. 得到这个字符串中出现的所有的回文. 得到他们的左端点以及右端点. 整理成一个pair<int,in ...

  6. ASP.NET-GUID扩展类使用

    在NUGET上有一个GUID的类,安装试用一下它的方法 将string转为guid对象 Guid ad = new Guid("{99009327-15D2-4A69-B015-BEAC11 ...

  7. 基于ORA-12170 TNS 连接超时解决办法详解

    转自原文 基于ORA-12170 TNS 连接超时解决办法详解 1.开始----程序-----Oracle------配置和移植工具-----Net Manager----本地----服务命名---o ...

  8. Eclipse下的java工程目录问题和路径问题理解

    1.Eclipse下的java工程都有哪些文件夹? 答:new java project时,会默认创建SRC源代码目录,并默认创建一个bin目录作为输出目录,输出目录是指生成的class文件和配置文件 ...

  9. System.arraycopy用法

    System.arraycopy用法 注意长度的设置: public class ArrCopy { public static void main(String[] args) { int [] s ...

  10. Rails内存的问题 Java内存情况

    Rails内存的问题 Java内存情况 一个txt文件,100M,300万行,都是坐标数据: 需要进行坐标的变换.计算.比较: 在Rails中使用Ruby进行计算,会导致内存超过1.5G,最后溢出而亡 ...