Измените единственный цвет таблицы строк, когда я нажимаю флажок

Question

У меня есть следующая таблица цвет фона CSS светло-серый. Как я могу это сделать?

Точно используйте это JQuery:

  $('.checkbox').click(function () {
            if ($(this).is(":checked")) {

                $('.baris').attr('style', 'background-color: lightgrey;');
            }
        });

, но весь ряд станет светло-серым.

Answer 1

Вы также можете рассмотреть возможность использования .addClass() или .toggleClass()

$(function() {
  $(".baris input[type='checkbox']").change(function() {
    if ($(this).is(":checked")) {
      $(this).closest("tr").addClass("highlight");
    } else {
      $(this).closest("tr").removeClass("highlight");
    }
  });
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

.highlight {
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="rowA baris">
    <td>A</td>
    <td>
      <input class="checkbox" type="checkbox" />
    </td>
  </tr>
  <tr class="rowB baris">
    <td>B</td>
    <td>
      <input class="checkbox" type="checkbox" />
    </td>
  </tr>
  <tr class="rowC baris">
    <td>C</td>
    <td>
      <input class="checkbox" type="checkbox" />
    </td>
  </tr>
  <tr class="rowD baris">
    <td>D</td>
    <td>
      <input class="checkbox" type="checkbox" />
    </td>
  </tr>
  <tr class="rowE baris">
    <td>E</td>
    <td>
      <input class="checkbox" type="checkbox" />
    </td>
  </tr>
</table>

Таким образом, вы можете использовать имена классов и поддерживать согласованность во всех элементах страницы.

Answer 2

Вы должны использовать .closest(), чтобы получить правильный ряд

$('.checkbox').click(function () {
     var backgroundColor = $(this).is(":checked") ? "lightgrey;" : "";
     $(this).closest('tr').attr('style', 'background-color: '+ backgroundColor +'');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
      <tr class="rowA baris">
       <td>A<td>
       <Td><input class="checkbox" type="checkbox"><td>
      </tr>
      <tr class="rowB baris">
       <td>B<td>
       <Td><input class="checkbox" type="checkbox"><td>
      </tr>
    </table>