javascript - 单击父类别复选框时选择所有子类别复选框

Question

Hii 我有一个 HTML 页面，它显示类别及其相关的子类别，每个类别旁边都有一个复选框。我的清单看起来有点像这样：-

文件
夹1 --文件夹 2 --文件夹 5 --
文件夹
8

文件夹 3 --文件夹 4 --
文件夹
9

我需要的是在单击父类别时检查所有子类别。（即当Folder1旁边的复选框被选中时，Folder2、Folder5、Folder8应该被选中）

Answer 1

问题实际上是如何找到属于此类子类别的复选框。

为子类别复选框赋予相同的名称（例如subcat_folder1）。onClick对于类别复选框，请在句柄上放置一个 javascript 函数。当用户单击 folder1 复选框时，找到所有名为 subcat_folder1 ( getElementsByName('subcat_folder1')) 的元素并执行您的操作。

Answer 2

有点模糊的问题，所以这里有几个例子

基于班级，如果选择了任何孩子，则检查父母，如果检查父母，则检查所有孩子。

var checkboxHandlerObj = {
    init: function () {
        $('#customerServices input:checkbox[class="parent"]').click(checkboxHandlerObj.parentClicked);
        $('#customerServices input:checkbox[class^="parent-"]').click(checkboxHandlerObj.childClicked)
    },
    parentClicked: function () {
        var parentCheck = this.checked;
        $('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').each(function () {
            this.checked = parentCheck
        });
    },
    childClicked: function () {
        var temp = $(this).attr('class').split('-');
        var parentId = temp[1];
        $('#' + parentId)[0].checked = $('#customerServices input:checkbox[class="' + $(this).attr('class') + '"]:checked').length !== 0;
    }
}
checkboxHandlerObj.init();

一个小提琴：http: //jsfiddle.net/gfDAh/

这是一个父依赖模型，如果未选中任何子项，则取消选中父项，并且它有一个“选中所有子项”框

$('#jobTypesMaster').click(function() {
    var iam = this.checked;
    $('.billdetail').each(function() {
        this.checked = iam;
    });
    if (!iam) {
        $('.billfinal:checkbox')[0].checked = iam;
    };
    $('.billfinal').attr('disabled', !this.checked);
    if (!iam) {
        $('.billspaid:checkbox')[0].checked = this.checked;
    };
    $('.billspaid').attr('disabled', $('.billfinal').checked);
});
$('.billdetail').click(function() {
    if ($('.billdetail:checked').length < $('.billdetail:checkbox').length) {
        $('.billfinal:checkbox')[0].checked = false;
        $('.billspaid:checkbox')[0].checked = false;
        $('.billfinal').attr('disabled', true);
        $('.billspaid').attr('disabled', true);
        $('#jobTypesMaster')[0].checked = false;
    }
    else {
        $('.billfinal').attr('disabled', false);
    };
});
$('.billfinal').click(function() {
    $('.billspaid:checkbox').attr('disabled', !this.checked);
    if (!this.checked) {
        $('.billspaid')[0].checked = false;
    };
});
$('.billdetail').trigger('click'); //set value based on initial checked count

小提琴：http: //jsfiddle.net/h682v/3/