0

我想创建一个带有单选按钮的表格。
当悬停在行上时，表格行突出显示。（应用了“悬停”类）单击行更改时，包含的选项按钮变为选中状态并且背景颜色更改（应用了“活动”类）。

到目前为止一切顺利，除了只有在直接单击单选而不是行时才应用活动类。并且活动类不会删除。

http://jsfiddle.net/vincentieo/cH7R9/2/

HTML

<form action="paypal-size-guide.html" method="" accept-charset="utf-8">
<table id="sizeOptions">
<thead>File Size</thead>
    <tr>
        <td><input type="radio" name="size" value="Large" checked="true"> Large</option></td>
        <td>3000 x 2000px</td>
        <td>&pound;20</td>
    </tr>
    <tr>
        <td><input type="radio" name="size" value="Medium" > Medium</option></td>
        <td>1500 x 1000px</td>
        <td>&pound;15</td>
    </tr>
    <tr>
        <td><input type="radio" name="size" value="Small" > Small</option></td>
        <td>750 x 500px</td>        
        <td>&pound;10</td>
    </tr>
</table>
</form>

JS

$('#sizeOptions tr').click(function() {
    $(this).find('td input:radio').prop('checked', true);
});

$('#sizeOptions tr td input:radio').click(function() {
    if($(this).is(':checked')) {
        $(this).closest('tr').addClass("active");
    } else {
        $(this).closest('tr').removeClass("active");
    }
});

$('#sizeOptions tr').mouseover(function() {
$(this).addClass("hover");
});

$('#sizeOptions tr').mouseout(function() {
$(this).removeClass("hover");
});

CSS

#sizeOptions {
    border-collapse: collapse;
    padding: 10px;
}

#sizeOptions td {
    padding: 10px;
}

#sizeOptions tr {
    border-bottom: solid 1px #b1b1b1;
}
4

1 回答 1

2

你有几件事导致你的问题。

首先，您已经有一个用于单击该行的处理程序。如果您希望对单选按钮和行的点击都起作用，您只需要行处理程序，因为对按钮的任何点击也会传播到行。

按钮上的单击处理程序仅适用于对按钮的实际单击，而不是在您使用 jQuery 设置按钮状态时，除非您以.click()编程方式调用。

单选按钮永远不能通过单击它来取消选择，只能通过单击另一个按钮来取消选择。因此，您的代码将永远不会删除活动类。相反，只需从所有行中删除活动类，然后将其应用回被单击的类。它还大大简化了您的代码。

此外，如果您重新排列 css 定义的顺序，您的活动状态将在您单击时立即显示，这是一个更好的 UI，因为有反馈给用户。或者你可以.active.hover上课。无论哪种方式，用户都可以轻松地告诉他们点击了。

代码：

$('#sizeOptions tr').click(function () {
    $(this).find('td input:radio').prop('checked', true);
    $('#sizeOptions tr').removeClass("active");
    $(this).addClass("active");
});

演示：http: //jsfiddle.net/yNWSY/

于 2013-02-25T17:55:10.327 回答