今天遇到一个问题：就是项目里有用到限制 checkbox框选中个数，看起来很简单，但是确实花了点时间才弄清楚，废话不多说，上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

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

</head>

<body>

    <script type="text/javascript">

        $(function(){

            $(".tag_list_info input").click(function(){

                var num=$('.tag input:checked').length;

                if(num>8){

                    $(this).prop("checked","");

                }

            })

        })

    </script>

    <div class="tag clear">

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_1">

            <label for="tag_sort_1">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_2">

            <label for="tag_sort_2">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_3">

            <label for="tag_sort_3">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_4">

            <label for="tag_sort_4">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_5">

            <label for="tag_sort_5">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_6">

            <label for="tag_sort_6">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_7">

            <label for="tag_sort_7">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_8">

            <label for="tag_sort_8">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_9">

            <label for="tag_sort_9">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_10">

            <label for="tag_sort_10">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_11">

            <label for="tag_sort_11">招商加盟</label>

        </div>

        <div class="list tag_list_info">

            <input type="checkbox" id="tag_sort_12">

            <label for="tag_sort_12">招商加盟</label>

        </div>

    </div>

</body>

</html>

需要注意的是：

　　1.点击事件不能绑定在label上面，只能绑定在input上，若绑定在input的父元素上的话就会引发"冒泡"，导致点击事件触发两次

　　2.获取属性的时候，有时候attr（）不起作用，而换成prop（）却可以，原因如下：

jquery1.6中新加了一个方法prop()，一直没用过它，官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。
大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点！
以下是官方建议attr(),prop()的使用：
Attribute/Property .attr() .prop()
accesskey √  
align √  
async √ √
autofocus √ √
checked √ √
class √  
contenteditable √  
draggable √  
href √  
id √  
label √  
location ( i.e. window.location ) √ √
multiple √ √
readOnly √ √
rel √  
selected √ √
src √  
tabindex √  
title √  
type √  
width ( if needed over .width() ) √  
 =========================================分割线=============================
下面介绍另一个效果，当做拓展吧，这是网上一个大神的代码，我研究了一会儿，写的很好跟大家分享一下
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>demo</title>

</head>

<body>

<script type="text/javascript">

var p_tag,inputs,selectInputs=[];

window.onload = function(){

    p_tag = document.getElementById("inputsParent");

    inputs = p_tag.getElementsByTagName("input");

    for(var i=0; i<inputs.length; i++){

        if(inputs[i].checked == true) selectInputs.push(inputs[i]);

    }

}

function check_count(th){

    var i=n=0;

    if(th.checked == true)

    {

        selectInputs.push(th);

        if(selectInputs.length > 2){

            selectInputs[0].checked = false;

            selectInputs.shift();

        }

    }else{

        if(selectInputs.length>1){

            for(var i=0; i<selectInputs.length; i++){

                if(th == selectInputs[i]) selectInputs.splice(i,1);

            }

        }else{

            th.checked = true;

            return false;

        }

    }

}

</script>

<div id="inputsParent">

    <input value="1" type="checkbox" name="chRates" onclick="check_count(this)"/><label>1</label>

    <input value="2" type="checkbox" name="chRates" onclick="check_count(this)"/><label>2</label>

    <input value="3" type="checkbox" name="chRates" onclick="check_count(this)" /><label>3</label>

    <input value="4" type="checkbox" name="chRates" onclick="check_count(this)" /><label>4</label>

    <input value="5" type="checkbox" name="chRates" onclick="check_count(this)" /><label>5</label>

    <input value="6" type="checkbox" name="chRates" onclick="check_count(this)" /><label>6</label>

    <input value="7" type="checkbox" name="chRates" onclick="check_count(this)" /><label>7</label>

    <input value="8" type="checkbox" name="chRates" onclick="check_count(this)" /><label>8</label>

</div>

<div id="aa"></div>

</body>

</html>
这个效果就是最多只能选择2项，至少选择1项，然后选择个数超过两个之后，会自动把第一个取消掉！
 
 
 
 

复选框checkbox选中个数限制的更多相关文章

  1. 复选框 checkbox 选中事件

    项目中用的jquery-1.11 今天需要检测一个checkbox的选中状态,想当然的用 .attr("checked") ,结果发现,无论是否选中,这个值都是 undefined ...

  2. js获取复选框checkbox选中的多个值

    <input type="checkbox" name="idd" value="111" />a <input type ...

  3. php 判断复选框checkbox是否被选中

    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...

  4. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  5. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  6. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  7. js获取checkbox复选框获取选中的选项

    js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...

  8. jQuery实现checkbox（复选框）选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  9. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

随机推荐

  1. Sass：初识Sass与Koala工具的使用

    一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...

  2. Handler系列之使用

    作为一个Android开发者,我们肯定熟悉并使用过Handler机制.最常用的使用场景是"在子线程更新ui",实际上我们知道上面的说话是错误的.因为Android中只有主线程才能更 ...

  3. C# 复制幻灯片（包括格式、背景、图片等）到同/另一个PPT文档

    C# 复制幻灯片(包括格式.背景.图片等)到同/另一个PPT文档 复制幻灯片是使用PowerPoint过程中的一个比较常见的操作,在复制一张幻灯片时一般有以下两种情况: 在同一个PPT文档内复制 从一 ...

  4. Android GPS应用开发

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5715879.html GPS定位系统由三部分组成,即由GPS卫星组成的空间部分,若干地面组成的控制部分和普通 ...

  5. linux内核调试技术之修改内核定时器来定位系统僵死问题

    1.简介 在内核调试中,会经常出现内核僵死的问题,也就是发生死循环,内核不能产生调度.导致内核失去响应.这种情况下我们可以采用修改系统内核中的系统时钟的中断来定位发生僵死的进程和函数名称.因为内核系统 ...

  6. 父页面操作iframe子页面的安全漏洞及跨域限制问题

    一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...

  7. SpringMVC一路总结（二）

    冰冻三尺非一日之寒.对技术的学习尤其得遵循这么一个理.在<SpringMVC一路总结(一)>中,清楚的总结了SpringMVC的入门案例,对于这类入门demo,理清套路,整理思绪是最为重要 ...

  8. Effective前端1：能使用html/css解决的问题就不要使用JS

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  9. LINQ to SQL语句(8)之Concat/Union/Intersect/Except

    适用场景:对两个集合的处理,例如追加.合并.取相同项.相交项等等. Concat(连接) 说明:连接不同的集合,不会自动过滤相同项:延迟. 1.简单形式: var q = ( from c in db ...

  10. python爬虫的一些心得

    爬虫用于从网上得到目标数据,根据需要对其予以利用,加以分析,得到想要的实验成果.现在讲一讲我这两天学到的东西. 第一,爬虫的算法结构,包括以下几个方面: (1)读取网络数据 (2)将获取的数据解析为目 ...