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

Question

我有一个 table，它有多组单选按钮组。当我突出显示一个单选按钮时，它会很好地突出显示该行。

下面的代码片段没有考虑到当我 select 在不同的组中时，我想为该组保持突出显示的单选按钮。

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

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

Answer 1

如果我对你的要求理解正确，你可以找到选中的radio并将class highlight添加到它的parent 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>

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

Highlighting rows when selecting radio buttons (multiple sets)

jquery

html-table

rows

radio