jqeury checkbox全选/反选 ，子选项全选，全选选中

// 全选/反选

$('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>