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、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

 </head>

 <body>

 <form action="#" name="myform">

     <input type="radio" name="rad" value="A">A

     <input type="radio" name="rad" value="B">B

     <input type="radio" name="rad" value="C">C

     <input type="button" value="按钮" onclick="myform.rad[0].click()">

 </form>

 <form action="#" name="myform2">

     <input type="checkbox" name="boxc" value="A" onclick="return check()">A

     <input type="checkbox" name="boxc" value="B" onclick="return check()">B

     <input type="checkbox" name="boxc" value="C" onclick="return check()">C

     <input type="checkbox" name="boxc" value="D" onclick="return check()">D

 </form>

 <script>

     //alert(myform.rad.length)

     //alert(myform.rad[1].value)

     //myform.rad[1].defaultChecked=true

     //myform.rad[0].click()

     function check(){

         var num=0;

         var len=document.myform2.boxc.length;

         for(var i=0;i<len;i++){

             if(document.myform2.boxc[i].checked){

                 num++

             }

         }

         if(num>2){

             // document.myform2.boxc[num-1].checked=false;

             alert('最多只能选择三项')

             return false ;

         }

     }

 </script>

 </body>

 </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. Xcode6:No architectures to compile for(ONLY_ACTIVE_ARCH=YES...)

    1.问题描写叙述 Xcode6真机測试旧project,不能执行,报错例如以下: 2.解决方式 问题非常明显,当前的执行模式设置了ONLY_ACTIVE_ARCH为Yes,当时的project的Val ...

  2. 5. Spring Boot 拦截器

    转自:https://blog.csdn.net/catoop/article/details/50501696

  3. 1.1 Introduction中 Topics and Logs官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Topics and Logs 话题和日志 (Topic和Log) Let's fi ...

  4. Flask项目之手机端租房网站的实战开发（十）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  5. oracle 多行转多列查询

     oracle 多行转多列查询  ---create table Fruit(id int,name varchar(20), Q1 int, Q2 int, Q3 int, Q4 int);inse ...

  6. LM4990音频功放芯片

    我们选用的一种封装:我们用的是DGK封装. 典型电路图: 下面是示意图:四中封装的示意图是不一样的: 下面是真正的原理图: 高放大倍数的原理图: 查分式的: 单个输入的原理图: 下面是有关电源的选择:

  7. 安装后，挂载c盘失败

    现象: 安装后,window C盘mount失败 错误内容如下: Error mounting: mount exited with exit code 13: ntfs_attr_pread_i: ...

  8. 搭建聊天机器人Bot Framework

    Bot Framework 搭建聊天机器人 这周我来跟大家分享的是在Microsoft Build 2016上发布的微软聊天机器人的框架. 现如今,各种人工智能充斥在我们的生活里.最典型的人工智能产品 ...

  9. 可视化格式模型(visual formatting model)

    原文 简书原文:https://www.jianshu.com/p/7632f16ff555 大纲 1.认识可视化模型 2.可视化模型的内容 3.可视化模型的影响因素 1.认识可视化模型 盒子模型是C ...

  10. Python——管理属性(2)

    __getattr__和__getattribute__ 眼下已经介绍了特性property和描写叙述符来管理特定属性[參考这里],而__getattr__和__getattribute__操作符重载 ...