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>