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

首先最直接的想法就是使用循环, 用局部变量记录已选的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. qt 透明化方法汇总

    一. QT 透明设置 背景,标题栏透明,下级Widget,painter绘出来的(比如,drawtext,drawline)不透明 QWidget window; window.setWindowFl ...

  2. 洛谷 P1147 连续自然数和 （滑动窗口）

    维护一个滑动窗口即可 注意不能有m到m的区间,因为区间长度要大于1 #include<cstdio> #define _for(i, a, b) for(int i = (a); i &l ...

  3. How to check Open vSwitch version and supports OpenFlow version

    Open vSwitch (OVS) is an open-source virtual switch, featuring programmable switch forwarding capabi ...

  4. Spring的ApplicationContextAware接口的作用

    ApplicationContextAware接口: 当一个类实现了这个接口之后,这个类就可以方便地获得 ApplicationContext 中的所有bean.换句话说,就是这个类可以直接获取Spr ...

  5. MyBatis学习总结（6）——调用存储过程

    一.提出需求 查询得到男性或女性的数量, 如果传入的是0就女性否则是男性 二.准备数据库表和存储过程 create table p_user( id int primary key auto_incr ...

  6. WinServer-IIS-压缩及缓存

    静态内容压缩: 默认10s内有2个客户端一起请求服务器的话,服务器就会把相关的静态内容压缩返回 动态内容压缩: 默认IIS的程序域最高可以占用CPU90%的资源,这个可以通过命令行修改 缓存和内核缓存 ...

  7. 极路由4pro安装java（Jamvm 2.0.0 + gnu classpath 0.9.8）

    首先试了gnu classpath 0.9.9,编译不过后来改成0.9.8 编译环境 OS: 64位 Ubuntu 16.04 LTS(vmware虚拟机) SDK: 用之前讲过的官方SDKmtmip ...

  8. android开发面试题

    找了将近两个星期的工作,面试了5家公司,罗列一下笔试或者面试时的问题,祝大家好运 1,handler机制 答:handler执行机制:1).在主线程中创建handler 2).子线程中借助主线程的ha ...

  9. windows下使用libsvm3.2

    一.官方介绍 libsvm主页:https://www.csie.ntu.edu.tw/~cjlin/libsvm/index.html libsvm介绍文档:http://www.csie.ntu. ...

  10. ApacheFlink简介

    对无界数据集的连续处理 在我们详细介绍Flink之前,让我们从更高的层面上回顾处理数据时可能遇到的数据集的类型以及您可以选择处理的执行模型的类型.这两个想法经常被混淆,清楚地区分它们是有用的. 首先, ...