限制复选框最多选择项的实现代码


Posted in Javascript onMay 30, 2016

在一个招聘网站中,通过限制用户选择职位标签个数,可以精确定位用户的职位。例如,以复选框的形式为用户提供一下备选职位标签,限制用户最多选择3个,当超过三个时禁止用户继续选择。

复选框在问卷调查,招聘网站用的很广,今天来介绍一下限制复选框最多选择几项的方法:

思路:

监听复选框的onclick事件

checkbox.onclick = function(){
 //代码块
}

监听复选框的checked属性:

if(chckbox.checked){
 //代码块
}

HTML代码:

< input type= "checkbox" name= "sport"/>篮球<br />
< input type= "checkbox" name= "sport"/>足球<br />
< input type= "checkbox" name= "sport"/>排球<br />
< input type= "checkbox" name= "sport"/>羽毛球<br/>
< input type= "checkbox" name= "sport"/>乒乓球<br/>
< p>最多选择三项</p>

JavaScript代码:

var sportSelect = document.getElementsByName('sport' ),
              maxNums   = 3;
           for(var i in sportSelect){
              sportSelect[i]. onclick = function (){
                 var _sportSelect = document.getElementsByName('sport' ),
                   cNums      = 0;
                 for(var i in _sportSelect){
                   if(i == 'length') break ;
                   if(_sportSelect[i].checked){
                      cNums ++;
                   }
                }
                 if(cNums > maxNums){
                   this.checked = false;
                    alert('最多只能选择三项');
                }
              }
           }

以上这篇限制复选框最多选择项的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 #Javascript
JS组件Bootstrap Table使用实例分享
May 30 #Javascript
Bootstrap table分页问题汇总
May 30 #Javascript
浅析Javascript中bind()方法的使用与实现
May 30 #Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 #Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 #Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 #Javascript
You might like
用PHP实现图象锐化代码
2007/06/14 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
农历与西历对照
2006/09/06 Javascript
showModelessDialog()使用详解
2006/09/07 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
Python基于execjs运行js过程解析
2020/11/27 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
什么是抽象
2015/12/13 面试题
自我评价200字分享
2013/12/17 职场文书
培训讲师邀请函
2014/01/10 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
怎样写辞职信
2015/02/27 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
python opencv通过4坐标剪裁图片
2021/06/05 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技