选中jquery以更改行背景色id单选按钮。
我想创建一个带有单选按钮的表。
将鼠标悬停在该行上时，表行将高亮显示。(应用‘hover’类)当单击行更改时，所包含的选项按钮变为选中状态，并且背景颜色更改(应用‘活动’类)。
到目前为止一切都很好，除了活动类仅在直接单击单选按钮而不是行时应用。并且活动类不会被移除。
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>£20</td>
</tr>
<tr>
<td><input type="radio" name="size" value="Medium" > Medium</option></td>
<td>1500 x 1000px</td>
<td>£15</td>
</tr>
<tr>
<td><input type="radio" name="size" value="Small" > Small</option></td>
<td>750 x 500px</td>
<td>£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;
}回答 1
Stack Overflow用户
发布于 2013-02-26 01:55:10
你有几件事导致了你的问题。
首先，您已经有了一个用于单击行的处理程序。如果希望同时单击单选按钮和行，则只需要行处理程序，因为对该按钮的任何单击都将传播到该行。
除非以编程方式调用.click()，否则在使用jQuery设置按钮状态时，按钮上的单击处理程序将仅应用于对按钮的实际单击。
单选按钮永远不能通过单击它来取消选中，只能通过单击其他单选按钮来取消选择。因此，您的代码永远不会删除活动类。相反，只需从所有行中删除活动类，然后将其应用回被单击的类。它也大大简化了你的代码。
此外，如果您重新排列css定义的顺序，您的活动状态将在您单击时立即显示，这是一个更好的UI，因为可以向用户提供反馈。或者你可以有一个.active.hover类。无论哪种方式，用户都可以很容易地知道他们点击了。
代码：
$('#sizeOptions tr').click(function () {
$(this).find('td input:radio').prop('checked', true);
$('#sizeOptions tr').removeClass("active");
$(this).addClass("active");
});https://stackoverflow.com/questions/15073076
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号