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


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 相关文章推荐
js DOM模型操作
Dec 28 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php实现通过ftp上传文件
2015/06/19 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
动态为事件添加js代码示例
2009/02/15 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
Python查找相似单词的方法
2015/03/05 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python批量创建指定名称的文件夹
2019/03/21 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
清华大学自主招生自荐信
2014/01/29 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书