jQuery的，动态的复选框选择

Question

我有不同的类别，我已经设置这样的下拉列表：

MAIN1
SUB1
SUB1
SUB1

MAIN2
SUB2
sub2
sub2

等

当我按下 “MAIN1” 所有 “Sub1的” S将被检查，等等。 我做了一个有效的功能。

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

     var checkboxes = $(".check_1"); 

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

      checkboxes.prop('checked', true); 

     } else { 

      checkboxes.prop('checked', false); 

     } 
    }); 

但只有当我硬编码它，它不会动态工作。

（在我的管理页面上，我将能够添加更多，并给他们一个ID，主“1”，子“1”等）。

任何想法我可以做到这一点？

Answer 1

改变你的代码如下可能帮助

$(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); 

    } 
}); 

只是利用“上”的方法。

Answer 2

这可能是有用的 - 我通知是如何管理的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

Answer 3

而不是给电网一个独特的类名，你可以给他们一个唯一的ID，名称，而不是和一个非唯一的类名，例如“清单”。确保子目录的类名与它们的parent-main-id相同。现在，你可以是这样的：

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

JSFiddle