Подсветка строк при выборе радиокнопок (несколько комплектов) - PullRequest
Новая
       11

Подсветка строк при выборе радиокнопок (несколько комплектов)

0 голосов
/ 26 сентября 2018

У меня есть таблица с несколькими наборами групп переключателей.Когда я выделяю радиокнопку, она хорошо выделяет строку.

Приведенный ниже фрагмент кода не учитывает, что я хочу оставить выделенную радиокнопку для группы, когда выбираю в другой группе.

Есть идеи, как мне решить эту проблему? 

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

изображение того, что я хочу

1 Ответ

0 голосов
/ 27 сентября 2018

Если я правильно понимаю ваше требование, вы можете найти проверенное радио и добавить класс 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>
...