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

首先最直接的想法就是使用循环, 用局部变量记录已选的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. 转载一遍比较好的,django2.1搭建博客教程

    非常感谢这位博主,找了几个星期终于找到了 https://www.dusaiphoto.com/article/article-detail/4/

  2. java判断输入的数字的位数_数字问题

    import java.util.Scanner;public class Numbers { public void Judgy(int n){ for(int i=0;i<100;i++){ ...

  3. Golang-and-package-version-managment

    参考文章 学习Golang之后对golang中的版本管理,包管理等机制一直没有很好的琢磨,偶然想起还是觉得很有必要进行归纳,包管理使用起来简单,无非就是install,uninstall,list等, ...

  4. HDU 4253 Two Famous Companies

    Two Famous Companies Time Limit: 15000ms Memory Limit: 32768KB This problem will be judged on HDU. O ...

  5. Qt程序打包成exe可执行文件

    很多Qt爱好者想发布自己的Qt软件,但却发现在其他没有安装Qt SDK的机器上无法运行,这就是本文想要说明的问题.现在网上大部分软件都要发布自己开发的应用程序,都会打包到exe文件中,待安装完exe文 ...

  6. Cocos2d-x可以实现的动画效果

    动作(Actions)move移动:moveto/moveby 从一个位置移动到另外一个位置 从一个位置移动多少数量级rotate旋转:rotateto/rotateby 从一个角度旋转到另外一个角度 ...

  7. ThinkPHP5.0框架开发--第4章 TP5.0路由

    ThinkPHP5.0框架开发--第4章 TP5.0路由 第4章 TP5.0 路由 ================================================== 上次复习 1. ...

  8. netty底层是事件驱动的异步库 但是可以await或者sync（本质是future超时机制）同步返回 但是官方 Prefer addListener(GenericFutureListener) to await()

    io.netty.channel 摘自:https://netty.io/4.0/api/io/netty/channel/ChannelFuture.html Interface ChannelFu ...

  9. jQuery ajax在IE浏览器的跨域问题--jquery.xdomainrequest.min.js

    jquery.ajax 加载数据, chrome, firefox, IE10+ 都可以顺利加载数据,但是IE9及以后版本不执,通过执行 jquery.ajax error 函数显示未执行 拒绝访问. ...

  10. .NET框架详解

    .NET框架的战略目标 .NET框架的战略目标是在任何时候(When),任何地方(Where),使用任何工具(What)都能通过.NET的服务获得网络上的任何信息,享受网络带给人们的便捷和快乐! .N ...