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>

选中单选按钮时如何更改元素的颜色

1 个答案: