单选按钮在选择时更改表格行背景颜色，并在选择另一个单选按钮时恢复正常而不会“悬停”干扰 [英] Radio button change table row background color when selected and go back to normal when selecting another radio button without 'hovering"interfering

问题描述

我看了其他类似的问题，但它对我没有帮助。当我选择单选按钮为蓝色时，我想更改表格行背景颜色。当我点击另一个单选按钮时，我希望另一个单元格更改回正常状态，然后单击一下以更改为蓝色。到目前为止，当我选择一个单选按钮时，它只是像悬停一样，当我移动鼠标时它会使行变为蓝色，它会恢复原来的颜色。我希望能够悬停并点击：

I looked at other similar questions but it did not help me. I want to change the table row background color when I select radio button to blue. When I click another radio button I want the other to change back to normal and the one I click to change to blue. As of now, when I select a radio button it just act like a hover and make the row blue as soon as I move the mouse away it goes back to its original color. I want to be able to hover and click:

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

推荐答案

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

您还可以使用结束：

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

但通常难以阅读和维护。

But it's usually harder to read and maintain.

• 请注意，最好使用css类而不是更改内联的css。

这篇关于单选按钮在选择时更改表格行背景颜色，并在选择另一个单选按钮时恢复正常而不会“悬停”干扰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！