Question

我有一个HTML页面，它显示了类别及其尊重子类别，每个类别旁边都有一个复选框。我的列表看起来有点像这样： -

Folder1中
  --Folder2
  --Folder5
  --Folder8

Folder3
--Folder4
--Folder9

我需要的是在单击父类别时检查所有子类别。（当选中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/

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

2 个答案: