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


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 相关文章推荐
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
Node.js使用Angular简单示例
May 11 Javascript
微信小程序实现上传图片功能
May 28 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
ant design charts 获取后端接口数据展示
May 25 Javascript
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遍历数组的4种方法总结
2014/07/05 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
实现vuex原理的示例
2020/10/21 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python实现简单井字棋游戏
2020/03/04 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
工作自荐信
2013/12/11 职场文书
推荐信怎么写
2014/05/09 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
集体生日活动方案
2014/08/18 职场文书