Question: I have a HTML table with several rows. In each row there is a question (text) in the first column, and 3 radio buttons to answer Yes, No, or N/A, in the 2nd, 3rd, and 4th columns, respectively.

I want to be able to change the font color of the text in the first column when either of the radio buttons in the same row is checked.

Other questions here in Stackoverflow refer to changing the background color of the cell where the radio button is located, but in this case I need to modify the attributes of the first column in the same row instead.

PS: You can find the dummy code to play with in [this JSBin fiddle](https://jsbin.com/xajebaxanu/edit?html,output):

```
<!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>

```

Any tips or suggestions will be more than welcome. Thanks in advance!

Answer: 
You can set an event listener.

You can also get the selected value to set the color based on the value if you want.

```js
$("input[name='student']").change(function(){
  console.log($(this).val());
  $(this).closest('tr').children('td').first().css('color', '#455434');
  });
```

```html
<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>
```
You can traverse the DOM to find the first column in the row that is clicked, and change the color based on which radio was selected.

Here is a [Fiddle Demo](https://jsfiddle.net/zephyr_hex/yoyppjda/).

```
$('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);
});

```