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. Solr 倒排索引

     正排索引(正向索引):正排表是以文档的ID为关键字,表中记录文档中每个字的位置信息,查找时扫描表中每个文档中字的信息直到找出所有包含查询关键字的文档. 正排表结构如图1所示,这种组织方法在建立索引的 ...

  2. Spark 概念学习系列之Spark存储管理机制

    Spark存储管理机制 概要 01 存储管理概述 02 RDD持久化 03 Shuffle数据存储 04 广播变量与累加器 01 存储管理概述 思考: RDD,我们可以直接使用而无须关心它的实现细节, ...

  3. 1.1 Python基础知识 - 变量

    1.什么是变量? 变量是可以通过变量名访问的内存地址,变量通常是可变的. 2.怎样去定义? 变量格式: 变量名 = "变量值" 例如: name = "Zhanghk&q ...

  4. LeetCode Algorithm 02_Add Two Numbers

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...

  5. [Vue] Load components when needed with Vue async components

    In large applications, dividing the application into smaller chunks is often times necessary. In thi ...

  6. HDU 1996汉诺塔VI

    题目: n个盘子的汉诺塔问题的最少移动次数是2^n-1,即在移动过程中会产生2^n个系列.由于 发生错移产生的系列就增加了,这种错误是放错了柱子,并不会把大盘放到小盘上,即各柱 子从下往上的大小仍保持 ...

  7. .dmp文件导出使用示例

    exp导出的几种用例,先睹为快: 1 将数据库SampleDB完全导出,用户名system 密码manager 导出到E:/SampleDB.dmp中 exp system/manager@TestD ...

  8. swift开发网络篇 - 用户登录POST JSON and header

    版权声明:本文为博主原创文章,未经博主允许不得转载. import UIKit import Alamofire class ViewController: UIViewController { va ...

  9. eclipse开发环境下集成activiti插件

    一.环境 eclipse 4.3.0 Activiti Designer 5.14.1 二.Activiti Designer 5.14.1插件安装 在eclipse中菜单help->Insta ...

  10. LLRB——红黑树的现代实现

    一.本文内容 以一种简明易懂的方式介绍红黑树背后的逻辑实现2-3-4树,以及红黑树的插入.删除操作,重点在2-3-4树与红黑树的对应关系上,并理清红黑树相关操作的来龙去脉.抛弃以往复杂的实现,而分析红 ...