标签：
主要功能：
方式一：使用三个按钮(全选、全不选 、反选)控制checkbox的选择。（实际可能全选/全不选共用按钮，这里没做）
方式二：使用一个主控checkbox用于控制其他checkbox的选择状态，同时受控checkbox是否全选也反馈给主控checkbox（这里有两种方式实现）。
以下代码及实现效果在jQuery v1.11.3测试通过！2015/07/18！
测试效果：
代码：
<!-- ------------------------------------------------------------------ -->
<h4>测试一：按钮控制选择</h4>
<script>
//全选/全不选/反选; 在jQuery 1.11.3测试通过
function checkedAll(checkboxName) {$("input[name=" + checkboxName + "]").prop("checked", true);}
function checkedNo(checkboxName) {$("input[name=" + checkboxName + "]").prop("checked", false);}
function checkedRev(checkboxName) {$("input[name=" + checkboxName + "]").each(function(){this.checked = !this.checked;});}
</script>
<input type="button" class="btn btn-xs" name="btnCheckedAll" value="全选" onclick="checkedAll(‘ckb‘);" >
<input type="button" class="btn btn-xs" name="btnCheckedNo" value="全不选" onclick="checkedNo(‘ckb‘);" >
<input type="button" class="btn btn-xs" name="btnCheckedRev" value="反选" onclick="checkedRev(‘ckb‘);" >
<br>
<input type="checkbox" name="ckb" value="ckb1">
<input type="checkbox" name="ckb" value="ckb2">
<input type="checkbox" name="ckb" value="ckb3">
<input type="checkbox" name="ckb" value="ckb4">
<!-- ------------------------------------------------------------------ -->
<h4>测试二：Checkbox控制选择(分步式)</h4>
<script>
//在jQuery 1.11.3测试通过
//使用id为controlerId的checkbox 控制 name为checkboxName的所有checkbox的选择状态。
//主控checkbox的onclick事件使用些方法
function checkedCtrl(controlerId,checkboxName){
$("input[name=" +checkboxName+"]").prop("checked",$("#"+controlerId).prop("checked"));
}
//受控checkbox使有此方法向id为controlerId的checkbox 反馈 name为checkboxName的所有checkbox的选择状态。
function feedbackCheck(controlerId,checkboxName){
if ($("input[name=" +checkboxName+"]:checked").length == $("input[name=" +checkboxName+"]").length) {
$("#"+controlerId).prop("checked", true) //当元素全部选择后，控制全部的checkbox也处于选定状态
} else {
$("#"+controlerId).prop("checked", false); //只要有一个没有选择控制全选的checkbox是不会checked的
}
//上面只反馈全选或非全选两种状态，可以增加判断反馈全选/全不选/选部分三种状态
}
</script>
<!-- 主控checkbox -->
<input type="checkbox" id="checkAll" value="" onclick="checkedCtrl(‘checkAll‘,‘checkboxItem‘);" ><br>
<!-- 授控checkbox -->
<input type="checkbox" name="checkboxItem" value="checkboxItem1" onclick="feedbackCheck(‘checkAll‘,‘checkboxItem‘);">
<input type="checkbox" name="checkboxItem" value="checkboxItem2" onclick="feedbackCheck(‘checkAll‘,‘checkboxItem‘);">
<input type="checkbox" name="checkboxItem" value="checkboxItem3" onclick="feedbackCheck(‘checkAll‘,‘checkboxItem‘);">
<input type="checkbox" name="checkboxItem" value="checkboxItem4" onclick="feedbackCheck(‘checkAll‘,‘checkboxItem‘);">
<br>
<!-- ------------------------------------------------------------------ -->
<h4>测试三：Checkbox控制选择(一体式)</h4>
<script>
$(function () {
var controlerId="leader"; //主控checkbox的id属性值
var checkboxItemName="checkbox";//受控checkbox的name属性值
$("#"+controlerId).click(function () {
$("input[name=" +checkboxItemName+"]").prop("checked", $(this).prop("checked"));
});
$("input[name=" +checkboxItemName+"]").each(function () {
$(this).click(function () {
if ($("input[name=" +checkboxItemName+"]:checked").length == $("input[name=" +checkboxItemName+"]").length) {
$("#"+controlerId).prop("checked", true) //受控checkbox全部选择后，主控checkbox也处于选定状态
} else {
$("#"+controlerId).prop("checked", false); //只要受控checkbox有一个不选，主控checkbox就不选
}
//必要时可改为反馈全选/全不选/选部分三种状态
})
});
});
</script>
<input type="checkbox" id="leader" value=""><br>
<input type="checkbox" name="checkbox" value="checkbox1">
<input type="checkbox" name="checkbox" value="checkbox2">
<input type="checkbox" name="checkbox" value="checkbox3">
<input type="checkbox" name="checkbox" value="checkbox4">
checkbox全选/全不选/反选(jQuery v1.11.3测试通过）
标签：
原文地址：http://www.cnblogs.com/minlorry/p/4656890.html
