JS在页面限制checkbox最大复选数

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


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

这样效果是一样的, 但循环就少一次.


转载于:https://www.cnblogs.com/gccbuaa/p/6930913.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/572366.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言 二维数组 文库,c语言二维数组练习题

c语言二维数组练习题 (3页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;19.90 积分完成下列程序代码完成下列程序代码1、 将二维数组(5 行 5 列)的右上半部分置零。 即&#xff1a;1234510000678910…

android陀螺仪轨迹,陀螺仪轨迹法长距离管道测量精度实测分析

陀螺仪轨迹法长距离管道测量精度实测分析陀螺仪轨迹法用于非开挖管道的精准坐标与位置测量已被电力与燃气等行业逐步了解与接受&#xff0c;近两年不断被引入到城市地下管线探测及电力与燃气管道验收标准中。由于管道埋于地下往往不能眼见为实&#xff0c;作为一种新的测量方式…

Spring IOC详解与配置

Spring&#xff1a; 框架&#xff1a; 具有一定功能的半成品软件&#xff0c;基于框架会节省开发成本 框架作用&#xff1a; 提高开发效率、复用性、编写规范、节约维护成本、解耦底层实现原理 Spring&#xff1a; Spring是分层的JavaSE/EE应用full-stack轻量级开源框架Sprin…

android8.0的蓝牙版本,android o 新特性详解 安卓8.0蓝牙音频增强以及更加可爱的表情包...

android 8.0什么时候推出&#xff1f;有哪些新特色&#xff1f;很多安卓用户非常想知道答案吧&#xff01;不用着急&#xff0c;下面是大麦子小编整理出来的安卓8.0新特性详解&#xff0c;希望可以帮到大家。有媒体近日曝光了有关谷歌Pixel XL 2手机会首发Android 8.0系统。现在…

DOM初级篇

DOM是什么、作用、与javascript&#xff1f; DOM是对HTML文档的访问和操作&#xff0c;对文档的增删改查。 DOM相当于是javascript一个类&#xff0c;这个类中提供了多种操作HTML的方法&#xff0c;也可以说DOM是依附在JavaScript上进行操作的。 一、标签的查找命令&#xff1b…

vs2019开发android应用,VS 2019开发APP(一)界面和代码

1.界面在Resources>layout>目录下的*.xml文件就是界面文件2.关联界面接下来&#xff0c;通过将支持代码插入到 MainActivity 类中来添加代码以关联用户界面。在 MainActivity 类中找到 OnCreate 方法&#xff0c;在其中添加关联按钮代码如下&#xff1a;protected overri…

oracle 数据库字段html显示正常text显示不全,layui表格字段表格显示不全(自适应)...

本文将为您描述layui表格字段表格显示不全(自适应),具体操作方法:好记性不如烂笔头。本来就是没什么好记得东西&#xff0c;下次再用时已经想不起来了。问题如下&#x1f41f;使用layui表格&#xff0c;表格字段显示不全&#xff0c;如果超出分配的位置&#xff0c;就会显示省略…

使用 VSCode 编写 .NET Core 项目之初体验

注&#xff1a;本文在根据 微软官方文档指导下&#xff0c;根据自己的学习中整理&#xff0c;并不完全照搬文档&#xff0c;但也大体和文档学习路线相似&#xff0c;主要为记录学习过程。 官方学习地址&#xff1a; https://code.visualstudio.com/docs/other/dotnet https://d…

html模板安装到织梦,织梦网站安装教程 织梦模板通用安装图文教程

织梦模版怎么安装使用呢 下面就把我的经验分享给大家解压文件上传到服务器指定根目录输入主域名访问“例如&#xff1a;//www.jb51.net/install”步骤1&#xff1a;勾选同意协议&#xff0c;点击继续按钮。步骤2&#xff1a;检查系统环境和文件权限&#xff0c;确定权限正确才能…

金乡高考成绩查询2021,金乡一中举行2021届高三年级一模成绩分析暨表彰大会!现场颁奖...

集思广益查缺补漏&#xff0c;全力以赴保驾护航。为增强备考紧迫性&#xff0c;提高备考有效性&#xff0c;激发师生积极性&#xff0c;2021年3月22日晚&#xff0c;山东省金乡一中2021届高三年级一模成绩分析暨表彰大会&#xff0c;在文峰楼二楼报告厅召开&#xff0c;本次会议…

匿名类

一、匿名类&#xff1a;[ C# 3.0/.NET 3.x 新增特性 ] 1.1 不好意思&#xff0c;我匿了 在开发中&#xff0c;我们有时会像下面的代码一样声明一个匿名类&#xff1a;可以看出&#xff0c;在匿名类的语法中并没有为其命名&#xff0c;而是直接的一个new { }就完事了。从外部看来…

MySQL— 进阶

目录 一、视图二、触发器三、函数四、存储过程五、事务 一、视图 视图是一个虚拟表&#xff08;非真实存在&#xff09;&#xff0c;其本质是【根据SQL语句获取动态的数据集&#xff0c;并为其命名】&#xff0c;用户使用时只需使用【名称】即可获取结果集&#xff0c;并可以将…

HTML中del标记是什么意思,HTML del标记

本文概述HTML 标记用于表示已从文档中删除/删除的文本范围。它用作已删除内容的标记。浏览器通常通过在已删除的文本上打一行来呈现它, 尽管可以使用CSS属性更改它。注意&#xff1a;要标识已删除的文本和插入的文本, 请使用带有的标记, 该标记将在文档中显示已删除和插入的文本…

进制原码反码补码

进制&#xff1a; 概念&#xff1a; 进制&#xff1a;指进位制&#xff0c;是人们规定的一种进位方式&#xff0c;表示某一位置的数看&#xff0c;运算时是逢*进一位。十进制是逢十进一&#xff0c;二进制是逢二进一。以此类推。学习的目的就是为了数据运算过程理解的更加深刻…

什么是位运算符

位运算符&#xff1a; 概念&#xff1a; 位运算符指的是二进制位的运算&#xff0c;先将十进制数转成二进制后再进行运算。 在二进制位运算中&#xff0c;1表示true&#xff0c;0表示false。 <<有符号左移运算&#xff1a;&#xff0c;二进制位向左移动, 左边符号位丢弃…

鸿蒙开发工具下载设置Mac

下载工具&#xff1a; 首先到网站注册开发者身份及实名认证&#xff1a;https://www.harmonyos.com/cn/ 然后选择对应的系统下载开发工具 点击跳转下载 会自动下载一些开发语言环境&#xff0c;然后一路下一步就可以了 点击第一个 选择第二个带Java的 勾选Application Devic…

封装this关键字

封装&#xff1a; 封装概念&#xff1a;封装是面向对象三大特征之一&#xff08;封装&#xff0c;继承&#xff0c;多态&#xff09;&#xff0c;目的就是隐藏实现细节&#xff0c;仅对外暴露公共的访问方式封装原则 将类的某些信息隐藏在类内部&#xff0c;不允许外部程序直接…

认识API

API&#xff1a; 概述&#xff1a; API (Application Programming Interface) &#xff1a;应用程序编程接口 例;&#xff1a;编写代码通过电脑控制挖掘机炒菜&#xff0c;那么挖掘机厂家就要提供一些控制挖掘机的接口类&#xff0c;这些类中定义好了操作挖掘机的动作&#xf…

计算机专业论文设计与实现,计算机专业论文 计算机网络的设计与实现.doc

计算机专业论文 计算机网络的设计与实现.doc文档编号&#xff1a;1385463文档页数&#xff1a;9上传时间&#xff1a; 2021-02-24文档级别&#xff1a;普通资源文档类型&#xff1a;doc文档大小&#xff1a;69.50KB黑龙江广播电视大学黑龙江广播电视大学 毕业设计(论文)毕业设计…

StringStringBuilder的使用

String String 类在 java.lang 包下&#xff0c;所以使用的时候不需要导包String这个类比较特殊, 打印其对象名的时候, 不会出现内存地址&#xff0c;而是该对象所记录的真实内容. 面向对象-继承, Object类 特点&#xff1a;Java 程序中所有的双引号字符串&#xff0c;都是 Str…