js进阶 9-15 多选框如何限制选中数目

一、总结

一句话总结：

1、多选框如何限制选中数目？

没点击选择一次，来统计现在总共选了多少个，如果超出，就给onclick事件返回false，取消onclick事件

2、如何取消已经点击的click事件？

给onclick中返回一个false，onclick="return check()"

3、多选框最常用的属性是什么？

checked

二、js进阶 9-15 多选框限制选中数目

1、案例说明：

多选框限制选中数目

2、相关知识：单选和复选框

通常使用input元素来创建单选和复选框，的属性和方法相同，两者属性和方法相同，具有input元素共有的其他属性和方法。

属性
  • 属性：id/form/name/type/disabled.......
  • Checked 设置或返回 checkbox 是否应被选中
  • defaultChecked 返回 checked 属性的默认值。
方法
  • click() 模拟在 checkbox 中的一次鼠标点击。
  • blur()、focus()

3、代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>演示文档</title>
  6.  </head>
  7.  <body>
  8.  <form action="#" name="myform">
  9.      <input type="radio" name="rad" value="A">A
  10.      <input type="radio" name="rad" value="B">B
  11.      <input type="radio" name="rad" value="C">C
  12.      <input type="button" value="按钮" onclick="myform.rad[0].click()">
  13.  </form>
  14.  <form action="#" name="myform2">
  15.      <input type="checkbox" name="boxc" value="A" onclick="return check()">A
  16.      <input type="checkbox" name="boxc" value="B" onclick="return check()">B
  17.      <input type="checkbox" name="boxc" value="C" onclick="return check()">C
  18.      <input type="checkbox" name="boxc" value="D" onclick="return check()">D
  19.  </form>
  20.  <script>
  21.      //alert(myform.rad.length)
  22.      //alert(myform.rad[1].value)
  23.      //myform.rad[1].defaultChecked=true
  24.      //myform.rad[0].click()
  25.  
  26.      function check(){
  27.          var num=0;
  28.          var len=document.myform2.boxc.length;
  29.          for(var i=0;i<len;i++){
  30.              if(document.myform2.boxc[i].checked){
  31.                  num++
  32.              }
  33.          }
  34.          if(num>2){
  35.              // document.myform2.boxc[num-1].checked=false;
  36.              alert('最多只能选择三项')
  37.              return false ;
  38.          }
  39.  
  40.      }
  41.  </script>
  42.  
  43.  </body>
  44.  </html>
 
 

js进阶 9-15 多选框如何限制选中数目的更多相关文章

  1. 折腾一天，获取下列多选框的所有选中值，原生js可直接通过obj.val()来获取，可jq不行，要通过循环取值来获取;

    折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

  2. js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）

    js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...

  3. checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  4. 判断easyUI tree 节点复选框是否被选中的方法。将选中的节点高亮显示的方法

    在datagrid tree中如何判断某个节点的复选框是否被选中? 我们可以通过HTML结构去分析: 1.节点未选中前 2.节点选中后 所以节点被选中前和选中后,html中的class类是用区分的. ...

  5. php数组转换字符串及复选框如何勾选中

    php数组转换字符串及复选框如何勾选中,应用到函数 implode  explode 复选框被选中后如何保存数据,表单提交过来为数组,要转换字符串 用到函数implode if(!empty($_PO ...

  6. jquery关于checkbox复选框是否被选中的问题

    本人在项目中需要用到,判断哪些复选框被用户选中.自然而然想到用 if($('').attr('checked') == true) 但是不管有没有选,$('').attr('checked')返回的都 ...

  7. 用js判断一个复选框是否被选中

    <html> <head>        <title>            复选框全选.全不选.反选.必选一个        </title>    ...

  8. Dtree 添加 checkbox 复选框 可以默认选中

    一:目标 要实现用一个树形结构的展示数据,每个节点(除了根节点)前有一个checkbox,同时,点击父节点,则子节点全选或者全不选,当选中了全部子节点,父节点选中:如下图所示: 同时可以在创建的时候, ...

  9. jquery单选框 复选框表格高亮 选中

    单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...

随机推荐

  1. Light OJ 1373 Strongly Connected Chemicals 二分匹配最大独立集

    m种阳离子 n种阴离子 然后一个m*n的矩阵 第i行第j列为1代表第i种阴离子和第j种阴离子相互吸引 0表示排斥 求在阳离子和阴离子都至少有一种的情况下 最多存在多少种离子能够共存 阴阳离子都至少须要 ...

  2. cocos2d-x认识之旅

    cocos2d-x 学习历程 1. 了解cocos2d-x.官网 : www.cocos2d-x.org 2. 搭建cocos2d-x. 使用版本号cocos2d-x 3.0 搭建好开发环境教程:ht ...

  3. 102.tcp实现多线程连接与群聊

    协议之间的关系 socket在哪 socket是什么 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP ...

  4. session的生命周期是怎样的

    session的生命周期是怎样的 一.总结 一句话总结:Tomcat中Session的默认失效时间为20分钟.如果我们敲代码的时候把它设置成1个月,那么这一个月的数据会代替默认20分钟的数据,使ses ...

  5. Android 监听软键盘点击回车及换行事件

    mEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() { @Override public boolean ...

  6. 2013腾讯编程马拉松初赛第〇场（HDU 4504）威威猫系列故事——篮球梦

    http://acm.hdu.edu.cn/showproblem.php?pid=4504 题目大意: 篮球赛假如我们现在已经知道当前比分 A:B,A代表我方的比分,B代表对方的比分,现在比赛还剩下 ...

  7. HibernateCRUD基础框架(2)-HQL语句构造器(HqlQueryBuilder,HqlUpdateBuilder)

    上篇讲述了最基本的实体类,本篇接着讲述HQL语句构造器,包括查询和更新等. 优点:通过面向对象的方式构造HQL语句,更快捷,不需要手动拼接HQL. 缺点:封装可能降低性能,只能支持常用的和较为简单的H ...

  8. ThreadLocal深入理解与内存泄露分析

    ThreadLocal 当使用ThreadLocal维护变量时,ThreadLocal为每个使用该变量的线程提供独立的变量副本.所以每个线程都能够独立地改变自己的副本.而不会影响其他线程所相应的副本. ...

  9. ubuntu, 修改hosts文件

    介绍下ubuntu下修改host实现域名指向本地的方法. Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结 ...

  10. POJ 2479 Maximum sum POJ 2593 Max Sequence

    d(A) = max{sum(a[s1]..a[t1]) + sum(a[s2]..a[t2]) | 1<=s1<=t1<s2<=t2<=n} 即求两个子序列和的和的最大 ...