Jquery多选框全选按钮功能示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多选框全选功能示例</title>
<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
</head>
<body>
<div id="inputContainer">
<label>1<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
<label>2<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
<label>3<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
<label>4<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
<label>5<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
<label>6<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
<label>7<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
<label>8<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
<label>9<input onclick="CkInput()" type="checkbox" class="ckAllInput" /></label>
</div>
<label>全选<input onclick="CheckAllJob()" type="checkbox" id="ckAllJobs" class="ckAllInput" /></label>
<script type="text/javascript">
//note: 若用attr修改checked属性,导致该属性是动态生成的,此时应该用prop来修改属性,若用attr方法则不会生效。
var ckTotal = $("#inputContainer input").length;
function CheckAllJob(){
var objInput = $("#inputContainer input");
if ($("#ckAllJobs").prop("checked") == true) {
$(".ckAllInput").prop("checked","checked");
} else{
$(".ckAllInput").removeProp("checked");
}
}
function CkInput(){
var ckNum = $("#inputContainer input:checked").length;
if (ckNum == ckTotal) {
$("#ckAllJobs").prop("checked","checked");
}else{
$("#ckAllJobs").removeProp("checked");
}
}
</script>
</body>
</html>