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. android对话框(Dialog)的使用方法

    Activities提供了一种方便管理的创建.保存.回复的对话框机制.比如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog( ...

  2. install-软件安装跟push的区别

    今天在做项目的时候,需要往一个user版本的手机中安装一个应用,就在网上查了相应的方法,可以使用如下命令 adb install -r out/target/product/vanzo6752_lwt ...

  3. elasticsearch cluster 概述

    在源码概述中我们分析过,elasticsearch源码从功能上可以分为分布式功能和数据功能,接下来这几篇会就分布式功能展开.这里首先会对cluster作简单概述,然后对cluster所涉及的主要功能详 ...

  4. 103.tcp通信实现远程控制

    客户端代码 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include < ...

  5. Flume Interceptors官网剖析（博主推荐）

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...

  6. Android RxBus的实现及简单使用

    RxJava目前已经很火了,如果你尚未了解请看这里.对于RxJava这里不多做介绍.RxBus并不是一个库,而是一种模式.相信大多数开发者都使用过EventBus,作为事件总线通信库,如果你的项目已经 ...

  7. 有关Canvas的一点小事—canvas和resize

     之前就说了canvas设置大小的时候用的就是设置实打实的像素值,像图像一样设置百分比然后根据浏览器大小自己适应大小是不可能的——当然一般也不会想要cavans改变大小.不过项目之前有用到过,既然去了 ...

  8. LA 3989 - Ladies' Choice 稳定婚姻问题

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  9. change_names

    DC在储存网表时,有时会采用特殊的字符 比如表示总线BUS[7]-BUS[0] 会表示成\BUS[7]    \BUS[6]...... 在compile命令之后,write命令之前  加上:chan ...

  10. 微服务实践（七）：从单体式架构迁移到微服务架构 - DockOne.io

    原文:微服务实践(七):从单体式架构迁移到微服务架构 - DockOne.io [编者的话]这是用微服务开发应用系列博客的第七篇也是最后一篇.第一篇中介绍了微服务架构模式,并且讨论了微服架构的优缺点: ...