0

こんにちは、カテゴリとそのサブカテゴリを表示する HTML ページがあり、各カテゴリの横にチェックボックスがあります。私のリストは次のようになります:-

Folder1
--Folder2
--Folder5
--Folder8

Folder3
--Folder4
--Folder9

親カテゴリがクリックされたときにすべてのサブカテゴリをチェックする必要があります。(つまり、Folder1 の横にあるチェックボックスがオンの場合、Folder2、Folder5、Folder8 が選択されます)

4

2 に答える 2

0

少し漠然とした質問なので、ここにいくつかの例があります

クラスに基づいて、子が選択されている場合は親をチェックし、親がチェックされている場合はすべての子をチェックします。

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/

于 2013-01-22T15:20:16.983 に答える
0

問題は、実際には、そのようなサブカテゴリに属する​​チェックボックスを見つける方法です。

サブカテゴリのチェックボックスに同じ名前を付けます（例subcat_folder1）。onClickカテゴリチェックボックスの場合は、ハンドルにjavascript関数を配置します。ユーザーがfolder1チェックボックスをクリックしたら、subcat_folder1（getElementsByName('subcat_folder1')）という名前のすべての要素を見つけて実行します。

于 2013-01-22T15:07:21.067 に答える