Javascript 单击表行时更新子元素类

我有一个产品选项表，每个

tr

都是一个选项。默认情况下选择一个，若要选择另一个，必须在提交表单之前选中单选按钮。这很简单，但整个

tr

必须可以单击，并相应地选中单选按钮

我想我已经通过下面的脚本实现了这一点：

$('.product-options tr').click(function() {
    $(this).find('td input[type=radio]').prop('checked', true);
});

除此之外，我还需要在

tr

中添加一类

.selected

。我尝试使用以下代码，但我还需要检查另一个

tr

是否已选择

类，并将其删除

$('.product-options tr').click(function() {
    $(this).find('td input[type=radio]').prop('checked', true);
    $(this).toggleClass('selected', true);
});

显然，只有单击相同的单选按钮，才会切换类。这就是我有限的javascript知识的不足之处。有人能帮忙吗

最后，我还使用了一个名为uniform.js的插件，它允许完全定制、选择/radio/复选框。当这包装一个div，然后在无线电输入周围添加一个span，span中添加一类
.checked
，以切换选中/未选中的样式。仅当您直接单击输入时，此选项才会更改。因此，我还需要考虑与
tr.selected
类类似的脚本，因为当单击
tr
的任何部分时，自定义单选按钮也会有一个更新的类

javascript生成的无线电的参考标记为：

<div class="radio">
    <span>
        <input type="radio" name="" />
    </span>
</div>



编辑：这里有一个包含uniform.js的代码笔，它可以更好地说明问题：


谢谢，真的希望有人能帮上忙。看起来很简单……但由于它是“分层的”，我有点迷路了！：）
 如果我理解正确，您只需访问tr的同级，并将已检查的收音机设置为false

$('.product-options tr').click(function() {
    $(this).find('td input[type=radio]').prop('checked', true);
    $(this).toggleClass('selected', true);
    $(this).siblings().find('td input[type=radio]').prop('checked', false);
    $(this).siblings().removeClass('selected');
});

这将找到所有的收音机，并将它们全部设置为false，除了您单击的行

更新

要使用uniform，可以在更改属性时直接调用
$.uniform.update（）

$(function() {
    $('input[type="radio"]').uniform();

    $('.product-options tr').click(function() {
        var tr = $(this),
            radio = tr.find('td input[type=radio]'),
            siblings = tr.siblings(),
            otherRadios = siblings.find('td input[type=radio]');

        tr.addClass('selected');
        siblings.toggleClass('selected', false);

        $.uniform.update(radio.prop('checked', true));
        $.uniform.update(otherRadios.prop('checked', false));
    });
});

如果我理解正确，您只需访问tr的同级，然后将选中的收音机设置为false

$('.product-options tr').click(function() {
    $(this).find('td input[type=radio]').prop('checked', true);
    $(this).toggleClass('selected', true);
    $(this).siblings().find('td input[type=radio]').prop('checked', false);
    $(this).siblings().removeClass('selected');
});

这将找到所有的收音机，并将它们全部设置为false，除了您单击的行

更新

要使用uniform，可以在更改属性时直接调用
$.uniform.update（）

$(function() {
    $('input[type="radio"]').uniform();

    $('.product-options tr').click(function() {
        var tr = $(this),
            radio = tr.find('td input[type=radio]'),
            siblings = tr.siblings(),
            otherRadios = siblings.find('td input[type=radio]');

        tr.addClass('selected');
        siblings.toggleClass('selected', false);

        $.uniform.update(radio.prop('checked', true));
        $.uniform.update(otherRadios.prop('checked', false));
    });
});

试试这个：

$('.product-options tr').click(function () {
            $(this).find('td input[type=radio]').prop('checked', true);
            $(this).closest('table').find('tr.selected').find('span.checked').removeClass('checked');
            $(this).closest('table').find('tr.selected').removeClass('selected');
            $(this).addClass('selected'); $(this).find('td:last').find('span').addClass('checked');
        });

试试这个：

$('.product-options tr').click(function () {
            $(this).find('td input[type=radio]').prop('checked', true);
            $(this).closest('table').find('tr.selected').find('span.checked').removeClass('checked');
            $(this).closest('table').find('tr.selected').removeClass('selected');
            $(this).addClass('selected'); $(this).find('td:last').find('span').addClass('checked');
        });

谢谢，我试过了，但不幸的是，如果单击另一个，它不会从以前选择的
tr
中删除
selected
类。此外，收音机是包装在div的风格。所以“检查”状态有效，但它还需要向其父级添加一个类，以便“检查”样式可见。检查演示，因为我刚刚要更新该部分。统一无线电通常会自我更新，不是吗？如果不是的话，一个额外的
radio.closest（'.radio'）
可以提供一个关于其父类的类。与
$类似。each（）
用于其他收音机清除类。是的，如果您直接单击元素，它们会清除类，但在单击表行时不会。必须关闭单击而不是收音机的状态？更新了代码，并提供了一个工作制服示例。因此，这应该与您的设置类似。谢谢，我尝试过，但不幸的是，如果单击另一个，它不会从以前选择的
tr
中删除
selected
类。此外，收音机是包装在div的风格。所以“检查”状态有效，但它还需要向其父级添加一个类，以便“检查”样式可见。检查演示，因为我刚刚要更新该部分。统一无线电通常会自我更新，不是吗？如果不是的话，一个额外的
radio.closest（'.radio'）
可以提供一个关于其父类的类。与
$类似。each（）
用于其他收音机清除类。是的，如果您直接单击元素，它们会清除类，但在单击表行时不会。必须关闭单击而不是收音机的状态？更新了代码，并提供了一个工作制服示例。因此，这应该与您的设置类似。谢谢，我无法让它工作，但我添加了一个代码笔，如果它有帮助的话：可能会显示问题更清楚一点！干杯非常感谢，太好了！：）谢谢，我不能让这个工作，但我已经添加了一个代码笔，如果它有帮助的话：可能会显示问题更清楚一点！干杯非常感谢，太好了！：）