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. hdu 4932

    枚举差和差的1/2 #include <cstdio> #include <cstring> #include <algorithm> using namespac ...

  2. 40.lombok在IntelliJ IDEA下的使用

    转自:https://www.cnblogs.com/yjmyzz/p/lombok-with-intellij-idea.html lombok是一款可以精减java代码.提升开发人员生产效率的辅助 ...

  3. 洛谷 P1808 单词分类_NOI导刊2011提高（01）

    P1808 单词分类_NOI导刊2011提高(01) 题目描述 Oliver为了学好英语决定苦背单词,但很快他发现要直接记住杂乱无章的单词非常困难,他决定对单词进行分类. 两个单词可以分为一类当且仅当 ...

  4. web服务器软件（Nginx，Apache，IIS，Lighttpd）介绍

    Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在 ...

  5. GO语言学习（八）Go 语言常量

    Go 语言常量 常量是一个简单值的标识符,在程序运行时,不会被修改的量. 常量中的数据类型只可以是布尔型.数字型(整数型.浮点型和复数)和字符串型. 常量的定义格式: const identifier ...

  6. GO语言学习（七）Go 语言变量

    Go 语言变量 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过变量名访问. Go 语言变量名由字母.数字.下划线组成,其中首个字母不能为数字. 声明变量的一般形式是使用 ...

  7. [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

    In this lesson we'll use CellMeasurer and CellMeasurerCache to automatically calculate and cache the ...

  8. php protected 类型如何获取

    感谢 https://blog.csdn.net/m0_38092942/article/details/81354184 比如对象如下 object(App\User)#265 (28) { [&q ...

  9. 【LeetCode-面试算法经典-Java实现】【104-Maximum Depth of Binary Tree（二叉树的最大深度）】

    [104-Maximum Depth of Binary Tree(二叉树的最大深度)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a binary t ...

  10. php实现合并两个排序的链表（很多情况下新建数组装东西比连东西逻辑快很多）（$cur=$cur->next;的理解）

    php实现合并两个排序的链表(很多情况下新建数组装东西比连东西逻辑快很多)($cur=$cur->next;的理解) 一.总结 $cur=$cur->next;这句话需要好好理解 指$cu ...