jquery更改行背景颜色ID收音机被选中

Question

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

迄今为止很好，除了活动类只适用于直接点击收音机而不是行。活动课不会删除。

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; 
} 

Answer 1

你有一对夫妇的事情，是造成你的问题。

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

按钮上的点击处理程序只适用于实际点击按钮，而不是当您使用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/