Question

我有一个下拉列表，其中包含我设置的不同类别：

MAIN1
SUB1
SUB1
SUB1

MAIN2
SUB2
SUB2
SUB2

等

当我按下“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名称，而不是为其提供唯一的名称，而是为其提供非唯一的类名，例如＆＃39; checklist＆＃39;。确保subs的类名与其parent-main-id相同。现在你可以做类似的事情：

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

JSFiddle

Answer 2

将代码更改为以下内容可能会有所帮助

$(document).on('change', '.main_check', function() {
    var mainCheck = $(this),
        subChecks = mainCheck.children('.sub-check');

    if(mainCheck.is(':checked')) {

        checkboxes.prop('checked', true);

    } else {

        checkboxes.prop('checked', false);

    }
});

只需使用＆＃34; on＆＃34;方法

Answer 3

这可能很有用 - 注意我管理HTML的方式：

$('#main_check_1').click(function() {
this_box = $(this);
        var checkboxes = $('.check1');

    checkboxes.each(function(){
        checkboxes.prop('checked', true);
        if(this_box.is(':checked')) {

            checkboxes.prop('checked', true);

        } else {

            checkboxes.prop('checked', false);

        }
    });

    });

JSFiddle

Jquery，动态复选框选择

3 个答案: