摘要：
全局选择和单选之间有两种关系：1.当我选择所有单选选项时，应选择全选。2.当我取消单个选择时，应取消全选。如果全局选择和单个选择之间没有关系，将出现以下两种情况：代码实现：＜div＞＜ul＞＜li＞＜！
全局选择与单选有以下两点关系：
1、当我把所有单选都选择上的时候，全选应该是被选择状态
2、当我取消一个单选时，全选应该是取消的状态
如果不存在全局选择与单选之间的关系，则会出现如下两图情况：
代码实现：（为了更清晰方便，所以只有复选框，可以根据自己需要进行修改）
<div> <ul> <li> <!--全选--> <input type="checkbox"id="all"class="parent_check">全选</li> </ul> </div> <div class="dataBox"> <ul > <li > <input type="checkbox"id="checkbox_1"class="son_check"> </li> </ul> <ul > <li > <input type="checkbox"id="checkbox_2"class="son_check"> </li> </ul> <div>
$(function () {
//全局的checkbox选中和未选中的样式
$parentChexbox = $('.parent_check'), //全选
$dataBox = $('.dataBox'), //用于判断全局与子类的关系
$sonCheckBox = $('.son_check'); //单个子类选中
//全局全选与单个的关系
$parentChexbox.click(function () {
var $checkboxs = $dataBox.find('input[type="checkbox"]');
if ($(this).is(':checked')) {
$checkboxs.prop("checked", true);
} else {
$checkboxs.prop("checked", false);
}
});
$sonCheckBox.each(function () {
$(this).click(function () {
if ($(this).is(':checked')) {
//判断：所有单个是否勾选
var len = $sonCheckBox.length;
var num = 0;
$sonCheckBox.each(function () {
if ($(this).is(':checked')) {
num++;
}
});
if (num == len) {
$parentChexbox.prop("checked", true);
}
} else {
//单个取消勾选，全局全选取消勾选
$parentChexbox.prop("checked", false);
}
})
})
});