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

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

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

赞 (0)

相关推荐

  • jQuery获取复选框被选中数量及判断选择值的方法详解

    本文实例讲述了jQuery获取复选框被选中数量及判断选择值的方法.分享给大家供大家参考,具体如下: 获取复选框被选中值 <input type="button" id="btn5" value="获得选中的所有值"> <input type="text" name="dd" id="dd" size="50" /> $("#btn5&

  • JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBox复选框JS实现全选.不选.全不选功能,很简单,具体内容如下 思路: 1.获取元素 2.给全选 不选 反选添加点击事件 3.用for循环checkbox 4.把chec

  • jquery获取复选框的值的简单实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:style><!-- --></mce:style><style mce_bogus="1"> </style>

  • js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

  • jquery获取复选框checkbox的值的简单实现方法

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option) js: //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值

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

    在一个招聘网站中,通过限制用户选择职位标签个数,可以精确定位用户的职位.例如,以复选框的形式为用户提供一下备选职位标签,限制用户最多选择3个,当超过三个时禁止用户继续选择. 复选框在问卷调查,招聘网站用的很广,今天来介绍一下限制复选框最多选择几项的方法: 思路: 监听复选框的onclick事件 checkbox.onclick = function(){ //代码块 } 监听复选框的checked属性: if(chckbox.checked){ //代码块 } HTML代码: < input t

  • js 实现复选框只能选择一项的示例代码

    实例如下所示: <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <ul> <li><input type="checkbox" name="ss" onclick="choose(this)">1</li> <li><inpu

  • layui复选框限制选择个数的方法

    复选框限制选择个数的方法 html <div class="layui-form-item"> <label class="layui-form-label">xxx</label> <div class="layui-input-block"> <input class="education" lay-filter="hope" type="

  • jQuery实现复选框批量选择与反选的方法

    本文实例讲述了jQuery实现复选框批量选择与反选的方法.分享给大家供大家参考.具体实现方法如下: function selectAll(){ $('input[type|=checkbox]').attr('checked','checked'); } function cancelAll(){ $('input[type|=checkbox]').removeAttr('checked'); } 希望本文所述对大家的jQuery程序设计有所帮助.

  • BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)

    废话不多说,直接给大家贴代码了,具体代码如下所示: $('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({ url:'../data/kehulist.json', uniqueId: "id", striped:true, // pagination:true, clickToSelect:true, height:340, columns: [{ field : 'state', checkbox:tr

  • JavaScript限定复选框的选择个数示例代码

    有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++)

  • 全选复选框JavaScript编写小结（附代码）

    对于全选框的操作分为两种情况: 1.单击全选框,下面全部选中 2.单击下面的复选框,全部点击上,全选框被选中,否则全选框没有选中. html样式 <tr> <td>爱  好</td> <td> <label for=""><input type="checkbox" name="fav" id="" value="苹果" class=&quo

  • 动态获取复选框checkbox选中个数的jquery代码

    动态获取复选框checkbox选中个数的jquery代码

    今天碰到"jquery动态获取复选框checkbox选中的个数",首先看下面例子: 复制代码 代码如下: <input type="checkbox" checked="checked">python<br> <input type="checkbox" checked="checked">java<br> <input type="check

  • jquery处理checkbox（复选框）是否被选中实例代码

    jquery处理checkbox(复选框)是否被选中 现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能正常使用,但是现在必须使用prop()方法代替 实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&q

  • 让复选框只能选择一项的方法

    js中: 复制代码 代码如下: function chooseOne(chk){ //先取得同name的chekcBox的集合物件 var obj = document.getElementsByName("chk"); for (i=0; i<obj.length; i++){ //判斷obj集合中的i元素是否為cb,若否則表示未被點選 if (obj[i]!=chk) obj[i].checked = false; //若要至少勾選一個的話,則把上面那行else拿掉,換用下面

随机推荐