手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >限制复选框最多选择项的实现代码
限制复选框最多选择项的实现代码
摘要:在一个招聘网站中,通过限制用户选择职位标签个数,可以精确定位用户的职位。例如,以复选框的形式为用户提供一下备选职位标签,限制用户最多选择3个...

在一个招聘网站中,通过限制用户选择职位标签个数,可以精确定位用户的职位。例如,以复选框的形式为用户提供一下备选职位标签,限制用户最多选择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('最多只能选择三项'); } } }

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

【限制复选框最多选择项的实现代码】相关文章:

JQuery中层次选择器用法实例详解

js实现异步循环实现代码

一个很简单的办法实现TD的加亮效果.

列表内容的选择

限制复选框的最大可选数

你一定会收藏的Nodejs代码片段

jQuery实现div随意拖动的实例代码(通用代码)

一些很实用且必用的小脚本代码第1/5页

Jquery中基本选择器用法实例详解

强制设为首页代码

精品推荐
分类导航