JS在页面限制checkbox最大复选数
JS 页面 最大 限制 checkbox
2023-09-11 14:20:46 时间
应该是挺简单的代码, 记录一下分享.
首先最直接的想法就是使用循环, 用局部变量记录已选的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+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)动画效果鼠标跟随
- A2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)
- JS插件之——bootstrap-suggest.js
- [Node.js]30. Level 6: Listen 'Question' from client, and then Answer the Question
- Json对象与Json字符串互转(4种转换方式) jquery 以及 js 的方式
- webpack配合vue.js实现完整的单页面demo
- [Whole Web, Node.js, PM2] Restarting your node.js app on code change using pm2
- [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
- js实现页面跳转的几种方式
- SAP UI5 walkthrough 8 - how is component.js loaded
- Atitit stomp.js conn连接activemq 目录 1.1. activemq 启动,已经默认开启了stomp ws的接口。。地址是1 1.2. Js 客户端代码1 1.3
- 华为OD机试 - 免单统计(Java & JS & Python)
- 14 【node js 7/7】
- js反混淆工具
- js准确获取当前页面url网址信息
- js之简易计算器
- SpringBoot2.x|Thymeleaf页面不能正常载入css、js文件
- thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?
- 工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码
- 浏览器的自动翻译会影响 JS 逻辑
- 水坑攻击之Jsonp hijacking-信息劫持,在钓鱼页面上调用js代码来获取用户在某些敏感站点的个人信息(如人人等)
- 深入学习js的classList
- 【JS高级】js面向对象三大特性之继承_06