Question

我有一个产品选项表，每个tr是一个选项。默认选择一个，要选择另一个，必须在提交表单之前检查单选按钮。这很容易，但整个tr必须是可点击的，并相应地检查单选按钮。

我想我设法使用下面的脚本让它工作：

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

除此之外，我还需要向.selected添加tr类。我尝试使用以下代码，但我还需要检查另一个tr是否已经有.selected类，并将其删除。

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

显然，如果单击相同的单选按钮，这只会切换该类。这是我有限的JavaScript知识落空的地方。有人可以帮忙吗？

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

javascript生成的广播的参考标记是：

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

编辑：这是一个包含uniform.js的CodePen，它应该更好地证明问题：

http://codepen.io/moy/pen/yeGRmO

谢谢，真的希望有人可以帮忙解决这个问题。似乎足够简单......但是因为它“分层”，我有点迷失了！：）

Answer 1

如果我理解正确，你可以简单地访问tr的兄弟姐妹，并将检查过的收音机放错。

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

这应该找到所有无线电并将它们全部置于假，除了你点击的行。

<强>更新

要使用制服，您可以在更改属性时直接调用$.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));
    });
});

DEMO

Answer 2

试试这个：

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

Check This Link

单击表行时更新子元素类

2 个答案: