Как изменить цвет элемента, когда установлен переключатель

Question

Как работает страница:Пользователь заполняет регистрационную форму (имя, фамилия, возраст ...).Администратор может просмотреть все эти значения и утвердить или отклонить каждое из них, щелкнув соответствующий переключатель.

Что я хочу:В моем файле .phtml у меня есть цикл, который производит различные группы переключателей (1 группа для поля имени, 1 группа для фамилии и т. Д.).Каждый переключатель имеет свой идентификатор.Каждая группа переключателей соответствует отдельному элементу на странице (имя, фамилия ...).Как я могу проверить, какая из двух радиокнопок на группу отмечена, и изменить цвет фона соответствующего элемента (имя, фамилия ...)?

Что я сделал до сих пор:Единственный способ, которым я мог заставить это работать, состоит в том, чтобы фактически щелкнуть переключатель и получить его ID.Затем с помощью директивы data-html я изменяю цвет соответствующего поля.Я попытался изменить функцию .click на .checked, но не мог понять, как получить нужные мне идентификаторы.

$(document).ready(function () {
    $('.radio-approved').click(function(){
        greenColor($(this));
    });

    $('.radio-rejected').click(function(){
        redColor($(this));
    });
});

function greenColor(button) {

    var correspondingField=document.getElementById(button.data('html'));

    $(correspondingField).css({
        "background-color": "green"
    });
}

function redColor(button) {

    var correspondingField=document.getElementById(button.data('html'));

    $(correspondingField).css({
        "background-color": "red"
    });
}

Answer 1

Это то, что вы имеете в виду?

$('[type="radio"][name="status"]').on('change', event => {
  $(event.target).closest('tr').css('background-color', $(event.target).val() == 'approve' ? 'green' : 'red')
});

td {width:150px;text-align:center}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th><th>Lastname</th><th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kevin</td><td>Spacey</td><td><input type="radio" value="approve" name="status">approve</input><input type="radio" value="reject" name="status">reject</input></td>
    </tr>
      <td>Nicolas</td><td>Cage</td><td><input type="radio" value="approve" name="status">approve</input><input type="radio" value="reject" name="status">reject</input></td>
    </tr>
      <td>Robert</td><td>Downey</td><td><input type="radio" value="approve" name="status">approve</input><input type="radio" value="reject" name="status">reject</input></td>
    </tr>
      <td>Chris</td><td>Evans</td><td><input type="radio" value="approve" name="status">approve</input><input type="radio" value="reject" name="status">reject</input></td>
    </tr>
  </tbody>
</table>