javascript - Jquery，动态复选框选择

Question

我有一个包含不同类别的下拉列表，我的设置如下:

主要1
子1
子1
子1

主要2
子2
子2
子2

等等

当我按“Main1”时，将检查所有“Sub1”，依此类推。我已经制作了一个可以运行的函数。

$('.main_check_1').change(function() {

        var checkboxes = $(".check_1");

        if($(this).is(':checked')) {

            checkboxes.prop('checked', true);

        } else {

            checkboxes.prop('checked', false);

        }
    });

但只有当我对其进行硬编码时，它才不会动态工作。

(在我的管理页面上，我将能够添加更多内容并给它们一个 id，Main"1"、Sub"1"等)。

知道我该怎么做吗？

Answer 1

您可以给它们一个唯一的 id 名称和一个非唯一的类名，例如“checklist”，而不是给主电源一个唯一的类名。确保子类的类名与其父主 ID 相同。现在你可以做一些类似的事情:

$('.checklist').change(function () {
    var mainCheck = this;
    $("." + mainCheck.id).each(function () {
        $(this).prop('checked', $(mainCheck).prop('checked'));
    });
});

JSFiddle