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