复选框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选中个数限制的主要内容，如果未能解决你的问题，请参考以下文章