时间戳

首页 > 解决方案 > 选中单选按钮时如何更改元素的颜色

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

问题描述

页面如何工作：
用户填写注册表（姓名、姓氏、年龄......）。管理员可以查看所有这些值，并通过单击相应的单选按钮来批准或拒绝每个值。

我想要什么：
在我的 .phtml 文件中，我有一个循环，可以生成不同的单选按钮组（1 组用于名称字段，1 组用于姓氏等）。每个单选按钮都有不同的 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"
    });
}

标签： javascriptjqueryhtmlradio-button

解决方案

你是这个意思吗？

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

推荐阅读