Question

我正在创建一个用于管理电子邮件订阅的页面，而我在查找从所有每组选项中取消订阅时遇到了问题。

问题

我的问题是我不知道如何使从所有取消订阅选项激活取消订阅列中与该特定组对应的单选按钮。

在检查取消订阅列中的单选按钮时，我还需要在其标签中添加一个类.selected，以便对它们进行样式化，以便在视觉上帮助传达已选择该选项的信息。

另请注意，在特定组中，当选中订阅选项时，该特定组的取消订阅所有复选框将变为未选中且类{{ 1}}已删除。

我知道这有点令人困惑（或很多），所以我创建了 DEMO 。

正如您将在JS评论中看到的那样，我可以选择单选按钮，但是会检查所有组的所有无线电按钮，而不是特定的单选按钮组。

我也尝试使用.selected，.parent()，.parents()方法，但我无法使其正常工作。

非常感谢任何帮助。

提前致谢。

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

jQuery：多个组，每个组都有全局选择器

2 个答案: