選中單選按鈕時如何更改元素的顏色

Question

頁面的工作方式：
用戶填寫注冊表（姓名，姓氏，年齡...）。 管理員可以查看所有這些值，並通過單擊相應的單選按鈕來批准或拒絕其中的每個值。

我想要的是：
在我的.phtml文件中，我有一個循環，該循環產生不同的單選按鈕組（一組用於名稱字段，一組用於姓氏，等等）。 每個單選按鈕都有一個不同的ID。 每個單選按鈕組對應於頁面中的不同元素（名稱，姓氏...）。 如何檢查每個組的2個單選按鈕中的哪個被選中，並更改其對應元素（名稱，姓氏...）的背景顏色？

到目前為止，我所做的是：
我唯一能使它起作用的方法是實際單擊單選按鈕並獲取它的ID。 然后，通過使用“ data-html”指令，我更改了相應字段的顏色。
我嘗試將.click函數更改為.checked，但是我不知道如何獲取所需的ID。

$(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>