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

首先最直接的想法就是使用循环, 用局部变量记录已选的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. sqrt开平方算法的尝试，是的看了卡马克大叔的代码，我来试试用C#写个0x5f3759df和0x5f375a86跟System.Math.Sqrt到底哪个更强

    今天笔试遇到一个代码题,要求写一个开平方算法,回来发现了雷神之锤里的一段神代码: float Q_rsqrt( float number ) { long i; float x2, y; const ...

  2. WPF原生环形图表

    原文:WPF原生环形图表 版权声明:欢迎转载.转载请注明出处,谢谢 https://blog.csdn.net/wzcool273509239/article/details/56480963 主要利 ...

  3. HAVING使用子查询

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

  4. $.ajax() 获取不到return 返回值

    /*常见错误示例 直接在 ajax 里面return 结果 */ function demo(){ $.ajax({ url : 'test.do', type : "post", ...

  5. pip安装-mac电脑

    If you meant "pip" specifically: Homebrew provides pip via: `brew install python`. However ...

  6. 【MongoDB】深入了解MongoDB不可不知的十点

    一.对象ID的生成 每一个mongoDB文档那个都要求有一个主键.它在每一个集合中对全部的文档必须是唯一的.主键存放在文档_id字段中.由12个字符组成: 4c291856       238d3b  ...

  7. $(window).load(function(){})跟$(document).ready(function(){})跟$(function(){})区别

    1.页面DOM加载完成 2.$(document).ready(function(){})  的简写是 $(function(){}) 执行 3.图片样式等所有HTML元素加载完毕 4.$(windo ...

  8. window如何在命令行关掉端口

    欢迎加入前端交流群来py:749539640   进入cmd netstat -ano | findstr :yourPortNumber taskkill /PID typeyourPIDhere ...

  9. Redis-3-string类型

    Redis-3-string类型 标签(空格分隔): redis set key value [ex 秒数] / [px 毫秒数] [nx] /[xx] mset key value key valu ...

  10. 如何显示bootstrap fileinput缩略图上面的删除按钮

    bootstrap上传文件控件初始化js: //bootstrap上传文件控件 $(".fileupload").fileinput({ language: "zh&qu ...