一、概述：

　　checkbox是我们在编写网页的时候经常使用的多选框，但是有些时候我们会限定最多选中的数量，如何限定呢？

　　下面这例子限定了最多选中两个元素，并且将这两个选中的源依次显示在一个文本框里：

<!DOCTYPE HTML >

<HTML>

 <HEAD>

  <TITLE> by失落沙洲 </TITLE>

 </HEAD>

 <style>

    #xianshi{

        height:30px;

        width:200px;

        border:1px solid black;

    }

 </style>

 <BODY>

    <div id="xianshi"></div>

    <div id="d1">

        <input type="checkbox" name="tianqi" value="下雨" onclick="check_count(this)" >下雨

        <input type="checkbox" name="tianqi" value="下雪" onclick="check_count(this)" >下雪

        <input type="checkbox" name="tianqi" value="打雷" onclick="check_count(this)" >打雷

        <input type="checkbox" name="tianqi" value="闪电" onclick="check_count(this)" >闪电

        <input type="checkbox" name="tianqi" value="台风" onclick="check_count(this)" >台风

        <input type="checkbox" name="tianqi" value="晴天" onclick="check_count(this)" >晴天

    </div>

 <script type="text/javascript" src="jquery-1.11.3.js"></script>

 <script type="text/javascript">

     var opts = new Array(); //定义一个空数组

        function check_count(_obj) {

            if ($(":checkbox[name='tianqi']:checked").length >= 0) {//找到name为天气的多选框 如果被选中的checkbox 长度大于0

                opts.push($(":checkbox[name='tianqi']").index($(_obj)));//将这个元素压入到opts数组中

                var val=$(_obj).val();//获取当前被选中的值

                var html="";//定义一个空字符串

                html+="<span>"+val+"</span>"//将被选中的值 拼在span标签内 并且传入html中

                if(_obj.checked){//判断 如果当前元素被选中

                    $(html).appendTo("#xianshi");/* 将拼好的html元素插入到 显示框内

                                                    注意html 现在是这样的 <span>天气名称</span>

                                                    穿到html页面是这种的

                                                    <div id="#xianshi">

                                                        <span>当前选中的天气名称</span>

                                                        <span>第二次选中的天气名称</span>

                                                        <span>第三次选中的天气名称</span>

                                                    </div>

                                                    下面会有限制条件

                                                    */

                }else{

                    $("#xianshi").innerHTML='';//如果没有被选中显示框为空

                }

            }

            if (opts.length >2) {//如果当前数组长度大于2时，这里就是判定你选中了多少个checkbox

                $($(":checkbox[name='tianqi']").get(opts.shift())).attr("checked", false);/*将你第一个选中的 check值设为false

                                                                                            注：checked 值有两个true为选中

                                                                                                              false为未选中*/

                $("#xianshi").children("span:eq(0)").remove();/*找到#xiashi框，查找他下面的第一个span标签

                                                                eq(0)是span标签的下标，0是第一个 1是第二个

                                                                排序方式跟数组相同的应该比较好理解

                                                                remove()是移除函数

                                                                也就是将你插入到#xianshi下的第一个span标签移除

                                                                这样就按照顺序显示了

                                                                */

            }

        }

 </script>

 </BODY>

</HTML>

　　代码里面已经写了注释，相信大家能看懂，此处注意，文档引用了jquery文件，代码写的比较粗糙，需要测试的朋友可以略作修改。

限定checkbox最多选中数量的更多相关文章

  1. jQuery和js如何判断checkbox是否选中

    jquery: <div id="divId" class="divTable"><div class="tableBody&quo ...

  2. checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  4. JQuery 多个checkbox 只选中一个

    <form id="common-form"> <input name="check1" type="checkbox"/ ...

  5. jquery 实现只能选中一个checkbox，选中当前的去除上一个

    jq 实现只能选中一个checkbox,选中当前的去除上一个. <div id="checkboxed"> <input name="check1&qu ...

  6. JQuery 实现多个checkbox 只选中一个

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. ----------jqery和js如何判断checkbox是否选中 --------两个单选按钮如何选一个，且用jquery获取被选的值

    jqery和js如何判断checkbox是否选中 jquery: <div id="divId" class="divTable"> <div ...

  8. JQuery判断checkbox是否选中-批量

    在html的checkbox里,选中的话会有属性checked="checked". 如果用一个checkbox被选中,alert这个checkbox的属性"checke ...

  9. TreeView控件的CheckBox级联选中或取消

    背景: 在一个项目开发中遇到这样的要求:当选中树中一个节点时,需要同时选中其父节点,直至根节点.在取消一个节点的选中时,需要将其所有子节点取消选中,直至叶子节点.由于项目用户体验暂时可以不用考虑,直接 ...

随机推荐

  1. 正式进入C#的世界——委托

    委托(delegate)1.可以认为是这样的对象,它包含具有相同签名和返回值类型的有序方法列表.2.可以理解为函数的一个包装,它使得C#中的函数可以作为参数来被传递. 委托的定义和方法的定义类似,只是 ...

  2. HDU3756

    题意:给定三围空间里面某些点,求构造出一个棱锥,将所有点包含,并且棱锥的体积最小. 输入: T(测试数据组数) n(给定点的个数) a,b,c(对应xyz坐标值) . . . 输出: H(构造棱锥的高 ...

  3. Avast注册以及更新

    昨天无聊在网上看Avast,然后下了玩. Avast有三种版本,免费版,网络版,高级版. 下了个高级版,在贴吧和论坛找激活码,发现大部分都没用,最后找了一个许可文件 关于Avast的注册,有在线和离线 ...

  4. Arcgis Desktop 9.3 安装

    以下用到的 Crack在我的网盘中有: ref: http://pan.baidu.com/s/1pJJlVBl 密码: p4gk 一,安装 Desktop(依次按照如图安装): 二,配置 1,以上步 ...

  5. hadoop2.4.1伪分布式搭建

    1.准备Linux环境 1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ip ...

  6. 托盘图标、气泡以及任务栏崩溃后的自动添加——Shell_NotifyIcon

    托盘图标使用函数 Shell_NotifyIcon 创建.修改和删除,参数主要使用 NOTIFYICONDATA 结构. 任务栏启动时会给所有顶层窗口发送 TaskbarCreated 消息,由于不同 ...

  7. PHP MYSQL读取中文乱码的解决办法

    其他试了很多种办法,结果最直接最简单的办法就是在SELECT前先发送设置.如下 mysqli_query($con,"SET NAMES 'UTF8'"); mysqli_quer ...

  8. phpcms插件开发初步规范

    phpcms公用库函数原型 (一)./include/global.php 中的函数可在phpcms的任何一个程序中调用,下面是各函数的原型及用法. message($alert,$goback='' ...

  9. 图片输出onerror事件

    <img src=".<?php echo $img[0];?>" onerror="this.src='img/zanwu.jpg'" st ...

  10. js本地存储解决方案(localStorage与userData)

    WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的user ...