选择单选按钮时突出显示行（多组）答案

【问题标题】：Highlighting rows when selecting radio buttons (multiple sets)选择单选按钮时突出显示行（多组）
【发布时间】：2019-03-02 12:05:11
【问题描述】：

我有一个包含多组单选按钮组的表格。当我突出显示一个单选按钮时，它会突出显示该行。

下面的代码 sn-p 没有考虑到当我在不同的组中选择时，我希望保持突出显示该组的单选按钮。

关于如何解决这个问题的任何想法？

// highlight paragraphs for radio.
$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'radio') {
      $(':radio', this).trigger('click');
    }
  });

  $("input[type='radio']").change(function(e) {
    var rdname = $(this).attr('name');

    e.stopPropagation();
    $('.record_table tr').removeClass("highlight");
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlight");
    }
  });
});

.highlight {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="record_table">
  <tr>
    <th>Set status</th>
  </tr>
  <tr>
    <td>active </td>
    <td> <input type='radio' id='123' name='group1'></td>
  </tr>
  <tr>
    <td>Not active </td>
    <td> <input type='radio' id='456' name='group1'></td>
  </tr>
  <tr>
    <th>Other Options</th>
  </tr>
  <tr>
    <td>active </td>
    <td> <input type='radio' id='412' name='group2'></td>
  </tr>
  <tr>
    <td>Not active </td>
    <td> <input type='radio' id='654' name='group2'></td>
  </tr>
  <tr>
    <th>3rd Options</th>
  </tr>
  <tr>
    <td>active </td>
    <td> <input type='radio' id='965' name='group3'></td>
  </tr>
  <tr>
    <td>Not active </td>
    <td> <input type='radio' id='963' name='group3'></td>
  </tr>
</table>

image of what i want

【问题讨论】：

您好，我已经检查了您的示例代码。现在，如果我们单击活动单选按钮意味着，活动单选按钮以蓝色突出显示。但是，当我们单击任何活动或非活动单选按钮时，您也希望突出显示非活动单选按钮。对吗？
嗨，布赖恩，感谢您的回复。不。我想在该组中突出显示选定的行。然后当我单击第二组中的一个选项时，它会突出显示选定的选项。（所以现在第 1 组中的一个被突出显示，第 2 组中的一个被突出显示）等等。我实际上有大约 12 个组，每个组在每个单选按钮组中包含 2 到 15 个条目。
好的。因此，如果我们检查活动单选按钮意味着，需要突出显示所有组活动单选按钮。对吗？
嗨，jawahar，我在问题中添加了一张图片，说明我想要实现什么。

标签： jquery html-table rows radio

【解决方案1】：

如果我正确理解您的要求，您可以找到选中的收音机并将 highlight 类添加到其父级 tr。

$('.record_table tr input:checked').closest('tr').addClass("highlight");

// highlight paragraphs for radio.
$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'radio') {
      $(':radio', this).trigger('click');
    }
  });

  $("input[type='radio']").change(function(e) {
    var rdname = $(this).attr('name');

    e.stopPropagation();
    $('.record_table tr').removeClass("highlight");
    $('.record_table tr input:checked').closest('tr').addClass("highlight");
  });
});

.highlight {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="record_table">
  <tr>
    <th>Set status</th>
  </tr>

  <tr>
    <td>active </td>
    <td> <input type='radio' id='123' name='group1'></td>
  </tr>
  <tr>
    <td>Not active </td>
    <td> <input type='radio' id='456' name='group1'></td>
  </tr>

  <tr>
    <th>Other Options</th>
  </tr>

  <tr>
    <td>active </td>
    <td> <input type='radio' id='412' name='group2'></td>
  </tr>
  <tr>
    <td>Not active </td>
    <td> <input type='radio' id='654' name='group2'></td>
  </tr>

  <tr>
    <th>3rd Options</th>
  </tr>

  <tr>
    <td>active </td>
    <td> <input type='radio' id='965' name='group3'></td>
  </tr>
  <tr>
    <td>Not active </td>
    <td> <input type='radio' id='963' name='group3'></td>
  </tr>

【讨论】：