// 全选/反选
$('input[name="checkall"]').click(function() {
$('input[name="checkone"]').prop("checked", this.checked);
});
//子选项全选,全选选中
$('input[name="checkone"]').click(function() {
var length = $('input[name="checkone"]').length;
var num = 0;
$("input[name='checkone']").each(function(){
one_checkd = $(this).prop('checked');
if(one_checkd == true){
num++;
}
});
if (length == num) {
$('input[name="checkall"]').prop('checked', true);
}else{
$('input[name="checkall"]').prop('checked', false);
};
});
现在又多了一种结构,在有一个全选的情况下,还有三个子类,每个子类也都有全选。
逻辑是这样的:
最大的那个全选 选中的情况下 所有的 子按钮全都选中,包括那三个子类全选,反之都取消。
三个子类全选 单个选中的情况下,自己范围内的子项选中。如三个子类全选全部选中,则最大的那个全选选中。反之只要有一个没有选中,则最大的那个全选取消。
最后,所有的子项选中:原来是只要全部选中,则全选选中,现在由于上面还多了一次。所以要每个区域的子选项的上面那个全选要选中,最后所有子选项选中后,最大的那个选中也选中。
可以对应这dom图看
最后上代码:
// 教师 全选/反选
$('.rules-content').on('click', 'input[name="teacherall"]', function () {
$('input[name="teacherone"]').prop("checked", this.checked);
$('input[name="subjectTeacherall"]').prop("checked", this.checked);
});
// 教师 子选项全选,全选选中
$('.rules-content').on('click', 'input[name="teacherone"]', function () {
var length = $('input[name="teacherone"]').length; // 获取所有教师的数量
var num = 0, singleSectionNum = 0;
$("input[name='teacherone']").each(function () { // 获取所有单个教师选中的数量
one_checkd = $(this).prop('checked');
if (one_checkd == true) {
num++;
}
});
// 所有教师 == 选中的教师
if (length == num) {
$('input[name="teacherall"]').prop('checked', true);
} else {
$('input[name="teacherall"]').prop('checked', false);
};
var singleSectionLength = $(this).parent().parent().parent().children().length; // 获取单科教师的数量
// 循环 单科下选中教师
$(this).parent().parent().parent().children().each(function () {
one_checkd = $(this).children().children().prop('checked');
if (one_checkd == true) {
singleSectionNum++;
}
})
// 单科所有教师 == 单科选中的教师
if (singleSectionLength == singleSectionNum) {
$(this).parent().parent().parent().prev().find('input[name="subjectTeacherall"]').prop('checked', true);
} else {
$(this).parent().parent().parent().prev().find('input[name="subjectTeacherall"]').prop('checked', false);
};
});
// 单科教师 全选/反选
$('.rules-content').on('click', 'input[name="subjectTeacherall"]', function () {
$(this).parent().parent().next().find('input[name="teacherone"]').prop("checked", this.checked);
var temp = 0;
$('input[name="subjectTeacherall"]').each(function () { //循环获取 单科全选未选中的数量
if (this.checked == false) {
temp++;
};
})
if (temp == 0) { //如全部单科选中,则顶部全部选中
$('input[name="teacherall"]').prop("checked", true);
} else {
$('input[name="teacherall"]').prop("checked", false);
}
});
dom 结构代码
<div class="rules-content">
<div>
<label><input type="checkbox" name="teacherall" id="">全选</label>
</div>
<div class="teacher-wrap">
<div>
<label><input type="checkbox" name="subjectTeacherall" id="">语文老师</label>
</div>
<ul class="teacher-list clearfix">
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
</ul>
</div>
<div class="teacher-wrap">
<div>
<label><input type="checkbox" name="subjectTeacherall" id="">数学老师</label>
</div>
<ul class="teacher-list clearfix">
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
</ul>
</div>
<div class="teacher-wrap">
<div>
<label><input type="checkbox" name="subjectTeacherall" id="">其他任课老师</label>
</div>
<ul class="teacher-list clearfix">
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
<li>
<label><input type="checkbox" name="teacherone" id="">宁夏</label>
</li>
</ul>
</div>
</div>