今天遇到一个问题：就是项目里有用到限制 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（）却可以，原因如下：
| 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>
原文：http://www.cnblogs.com/Coldbreath/p/6246922.html