Javascript 在同一行上选择单选按钮时更改表格单元格中的字体颜色

我有一个有几行的HTML表格。每行第一列有一个问题（文本），第二、第三和第四列分别有三个单选按钮，用于回答是、否或不适用

当选中同一行中的任一单选按钮时，我希望能够更改第一列中文本的字体颜色

Stackoverflow中的其他问题涉及更改单选按钮所在单元格的背景色，但在本例中，我需要修改同一行中第一列的属性

PS：您可以在中找到要使用的虚拟代码：

JS-Bin
问题:
对
不
不适用
你是一个学生吗？

欢迎提供任何提示或建议。提前谢谢

$(document).ready(function() {
   $('input[type=radio][name=student]').change(function() {
       $("td:first-child").css("color", "red");
   });
});

当选择单选按钮时，这可能会改变第一个td单元字体颜色中的问题

如果需要，您可以添加条件语句来检查选中了哪个复选框并更改字体颜色，这样当选择“否”时文本可以变为红色，当选择“是”时文本可以变为绿色

当选择单选按钮时，这可能会改变第一个td单元字体颜色中的问题

---

如果需要，您可以添加条件语句来检查选中了哪个复选框并更改字体颜色，这样当选择“否”时文本可以变为红色，当选择“是”时文本可以变为绿色

您可以设置事件侦听器

如果需要，还可以获取所选值以基于该值设置颜色

$（“输入[name='student']）。更改（函数（）{
log（$（this.val（））；
$（this）.closest（'tr'）.children（'td'）.first（）.css（'color'，'455434'）；
});

问题:
对
不
不适用
你是一个学生吗？
您可以设置事件侦听器

如果需要，还可以获取所选值以基于该值设置颜色


$（“输入[name='student']）。更改（函数（）{
log（$（this.val（））；
$（this）.closest（'tr'）.children（'td'）.first（）.css（'color'，'455434'）；
});

问题:
对
不
不适用
你是一个学生吗？
您可以遍历DOM以查找单击行中的第一列，并根据选择的收音机更改颜色

这是一本书

您可以遍历DOM以查找单击行中的第一列，并根据选择的radio更改颜色

这是一本书

您的文档中是否加载了jQuery？@Mojtaba-是的，我加载了。不过，我忘了将它添加到JSBin小提琴中。您的文档中加载了jQuery吗？@Mojtaba-是的，我加载了。不过，我忘了把它添加到JSBin小提琴中。非常感谢！我希望我能选择两个答案。非常感谢！我希望我能选择两个答案。非常感谢！这就是我要找的@加卡内帕，没问题。请记住，您可以删除
控制台.log
行。我添加它只是为了向您展示如何获取所选值非常感谢！这就是我要找的@加卡内帕，没问题。请记住，您可以删除
控制台.log
行。我添加它只是为了向您展示如何获取所选值谢谢！这确实是一个很好的答案！非常感谢。这确实是一个很好的答案！
$(document).ready(function() {
   $('input[type=radio][name=student]').change(function() {
       $("td:first-child").css("color", "red");
   });
});

$('input:radio').on('click', function() {
  //clear any existing background colors in the first column
  $('table tr td:first-child').css('background','transparent');
  //find the index of the column that contains the clicked radio
  var col = $(this).closest('td').index();
  //find the first td in that row
  var firstTd = $(this).closest('tr').find('td:first-child');
  //set the color based on the column index of the clicked radio
  var color;
  switch (col) {
    case 1:
      color = 'red';
      break;
    case 2:
      color = 'green';
      break;
    case 3:
      color = 'purple';
      break;
  }
 firstTd.css('background', color);
});