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 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 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
一个php作的文本留言本的例子(一)
2006/10/09 PHP
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
javascript中的缓动效果实现程序
2012/12/29 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
Python绘制堆叠柱状图的实例
2019/07/09 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
为什么是 Python -m
2020/06/19 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
经典大学生求职信范文
2014/01/06 职场文书
年终考核评语
2014/01/19 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
南京导游词
2015/02/03 职场文书
信访维稳承诺书
2015/05/04 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
浅谈Java父子类加载顺序
2021/08/04 Java/Android
python开发的自动化运维工具ansible详解
2021/08/07 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电