0

我查看了其他类似的问题，但对我没有帮助。当我将单选按钮选择为蓝色时，我想更改表格行的背景颜色。当我单击另一个单选按钮时，我希望另一个恢复正常，而我单击的那个单选按钮变为蓝色。到目前为止，当我选择一个单选按钮时，它就像悬停一样，一旦我将鼠标移开，它就会恢复到原来的颜色。我希望能够悬停并单击：

     <script>
    $(document).ready(function () {
    $("tr").not(':first').hover(
      function () {
        $(this).css("background","lightblue");
      }, 
      function () {
        $(this).css("background","");
      }
    );


    $('input:radio').change(function () {
        $(this).closest('tr').siblings().css('background-color', 'white')
                     .end().css('background-color', 'darkblue');
    });

    });

</script>
4

2 回答 2

1 
$('input:radio').change(function () {
    var parentTr = $(this).closest('tr');
    parentTr.siblings().css('background-color', 'white');
    parentTr.css('background-color', 'darkblue');
});

您还可以使用end：

$('input:radio').change(function () {
    $(this).closest('tr').siblings().css('background-color', 'white')
                         .end().css('background-color', 'darkblue');
});

但它通常更难阅读和维护。

  • 请注意，您最好使用 css 类而不是更改 css 内联。
于 2012-05-21T18:55:41.527 回答
1

试试这个：

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

</head>

<body>

<table>
<tr><td><input class="rad" type="radio" name="blah" value="1"/>One</td></tr>
<tr><td><input class="rad" type="radio" name="blah" value="2"/>Two</td></tr>
<tr><td><input class="rad" type="radio" name="blah" value="3"/>Three</td></tr>
</table>

</body>

</html>

<script type="text/javascript">
$("tr").not(':first').hover(
function () {
if($(this).css("background-color") != 'darkblue'){
$(this).css("background","lightblue");
}
}, 
function () {
if($(this).css("background-color") != 'darkblue'){
$(this).css("background","");
}
}
);
$(".rad").unbind("click").click(function(){
$('tr').css('background-color', 'white');
$(this).closest('tr').css('background-color', 'darkblue');
});
</script>
于 2012-05-21T19:33:32.883 回答