复选框checkbox选中个数限制

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了复选框checkbox选中个数限制相关的知识,希望对你有一定的参考价值。

今天遇到一个问题:就是项目里有用到限制 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选中个数限制的主要内容,如果未能解决你的问题,请参考以下文章

js怎么取得name=checkbox[]的复选框选中个数

监测checkbox复选框选中个数,可指定数目

Jquery if复选框是否已选中Bootstrap开关

使用 listiview 取消选中 Onscroll 选中的复选框

elementUI限制选中的checkbox的最大个数

JS获取checkbox的个数简单实例