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

标签 javascript jquery html css

我有一个包含多行的 HTML 表格。在每一行的第一列中有一个问题(文本),在第二列、第三列和第四列中分别有 3 个用于回答是、否或不适用的单选按钮。

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

这里Stackoverflow的其他问题是指更改单选按钮所在单元格的背景颜色,但在这种情况下,我需要修改同一行中第一列的属性。

PS:您可以在 this JSBin fiddle 中找到要玩的虚拟代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table border=1>
    <tr>
      <th>Question</th>
      <th>Yes</th>
      <th>No</th>
      <th>N/A</th>
    </tr>
    <tr>
      <td>Are you a student?</td>
      <td><input type="radio" name="student"></td>
      <td><input type="radio" name="student"></td>
      <td><input type="radio" name="student"></td>
    </tr>
  </table>
</body>
</html>

我们非常欢迎任何提示或建议。提前致谢!

最佳答案

您可以设置一个事件监听器。

如果需要,您还可以获取所选值以根据该值设置颜色。

$("input[name='student']").change(function(){
  console.log($(this).val());
  $(this).closest('tr').children('td').first().css('color', '#455434');
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table border=1>
    <tr>
      <th>Question</th>
      <th>Yes</th>
      <th>No</th>
      <th>N/A</th>
    </tr>
    <tr>
      <td>Are you a student?</td>
      <td><input value="1" type="radio" name="student"></td>
      <td><input value="2" type="radio" name="student"></td>
      <td><input value="3" type="radio" name="student"></td>
    </tr>
  </table>

关于javascript - 在同一行上选择单选按钮时更改表格单元格中的字体颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42253645/

相关文章:

javascript - Fancytree:如何获取复杂表中的输入值?

javascript - 如何在Chai和Postman中测试number和null数据类型?

javascript - 如何在Chrome扩展内容脚本中获取D3节点的数据

javascript - 显示/隐藏附加元素内的输入字段

jquery - Fancybox 根据屏幕尺寸错误地改变高度

javascript - Meteor - 添加了数组项目类,但是如何添加?

javascript - 如何根据页面 url 从数据库中填充页面上的表单字段?

html - 如何对齐部分 div 内容?

html - 如何在我的 Bootstrap 4 列中垂直居中文本

javascript - 对齐 div 内的按钮和按钮之间的跨度