Highlighting rows when selecting radio buttons (multiple sets)

Question

I have a table which has multiple sets of radio button groups. When I highlight a radio button it highlights the row fine.

The code snippet below doesn't take into account that I want to keep highlighted the radio button for the group when I select in a different group.

Any ideas on how I can resolve this?

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

If I understand your requirement correctly, you can find the checked radio and add class highlight to its 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>