jQuery：多個組，每個都有全局選擇器

Question

我正在創建一個頁面來管理電子郵件訂閱，並且我無法計算出從每個組選項的全部取消訂閱。

問題

我的問題是，我不知道如何使所有選項取消訂閱激活在取消訂閱列對應於特定的組單選按鈕。

在檢查Un-subscribe列中的單選按鈕時，我還需要將.selected類添加到它們的標籤中，以便使它們的樣式可視化地幫助傳達選項已被選中。

還要注意的是一個特定的羣體，當訂閱選項被選中之內，該所有複選框的這個特定的羣體變得氾濫，類.selected被去除未訂閱。

我知道這是一個有點混亂（或很多），所以我創建的這個DEMO。

正如您將在JS評論中看到的那樣，我可以選擇單選按鈕，但是所有組的所有無線電按鈕都會被檢查而不是特定的單選按鈕組。

我也試過使用.parent(),.parents(),.closest()方法，但我只是無法使它工作。

對此非常感謝。

在此先感謝。

Answer 1

http://jsfiddle.net/8MHHa/1/

$(".unsubs-chkbx-group").click(function() { 
    $(this).parents('table').first().find('.opt-out input:radio').attr('checked', true); 
    $(this).parents('table').first().find('.opt-out label').addClass('active'); 
    //$('.opt-out input:radio').attr('checked', true); 
    //$('.opt-out label').addClass('active');  
}); 

Answer 2

爲此，您可以像下面這樣：

$(".unsubs-chkbx-group").change(function() { 
    var $table = $(this).closest('tbody'); 

    // uncheck all 
    $('tr:not(.group) input', $table).prop('checked', false); 
    $('label', $table).removeClass('selected'); 

    if(this.checked) { 
     var $elements = $('.opt-out', $table); 
     $('label', $elements).addClass('selected'); 
     $('input', $elements).prop('checked', true); 
    } 
}); 

$('tbody input[type=radio]').change(function() { 
    var $element = $(this); 
    var $row = $element.closest('tr'); 
    $('label', $row).removeClass('selected'); 

    $element.parent().addClass('selected'); 
}); 

demo