JavaScript限定复选框的选择个数示例代码


Posted in Javascript onAugust 25, 2013

有10个复选框,用户最多只能勾选3个,否则就灰掉所有复选框。
(用户再次勾掉复选框时,仍然可以再次选择。)
将可变的部分设置为JS的参数,以实现代码复用。

JS代码
第一个参数为复选框的name,第二个参数为最多允许的勾选值。

function choicetest(name,num){ 
var choicearr = document.getElementsByName(name); 
var a=0; 
for(var i=0;i<choicearr.length;i++) 
if(choicearr[i].checked){ 
a=a+1; 
} 
if(a==num){ 
for(var i=0;i<choicearr.length;i++) 
if(!choicearr[i].checked) 
choicearr[i].disabled='disabled'; 
}else{ 
for(var i=0;i<choicearr.length;i++) 
choicearr[i].removeAttribute('disabled'); 
} 
}

范例程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
</head> 
<script language="javascript"> 
function choicetest(name,num){ 
var choicearr = document.getElementsByName(name); 
var a=0; 
for(var i=0;i<choicearr.length;i++) 
if(choicearr[i].checked){ 
a=a+1; 
} 
if(a==num){ 
for(var i=0;i<choicearr.length;i++) 
if(!choicearr[i].checked) 
choicearr[i].disabled='disabled'; 
}else{ 
for(var i=0;i<choicearr.length;i++) 
choicearr[i].removeAttribute('disabled'); 
} 
} 
</script> 
<body > 
<div width="513" onclick="choicetest('choice',3)" > 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>选择1 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>选择2 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>选择3 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>选择4 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>选择5 
<p></p> 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>选择6 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>选择7 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>选择8 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>选择9 
<label><input type="checkbox" name="choice" id="choice" width="30px;"/></label>选择10 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
浅谈js中的bind
Mar 18 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
js实现拖动缓动效果
Jan 13 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 #Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 #Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 #Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 #Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 #Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 #Javascript
高效率JavaScript编写技巧整理
Aug 23 #Javascript
You might like
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
html5唤起app的方法
2017/11/30 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
师范毕业生自荐信
2013/10/17 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
员工工作表扬信范文
2014/01/13 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书