Change color of table cell when radio button is checked

Question

I would like for the cell neighboring my radiobutton's cell to be highlighted green when the radio button is checked, and to turn back to grey when it is moved to unchecked. In other words, the radio button containing the value of the winning team should turn the cell containing that team's name green.

$('input:radio').checked(function() {
  $(this).closest('td').addClass('highlight');
});

.highlight {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr id='game_1'>
  <td class='bowl'>Fiesta Bowl</td>
  <td id='radiocell'>
    <input type='radio' name=1 value='Arizona'></input>
  </td>
  <td class='team1'>Arizona</td>
  <td id='radiocell'>
    <input type='radio' name=1 value='Boise State'></input>
  </td>
  <td class='team2'>Boise State</td>
  <td class='gameDay'>January 1</td>
</tr>

`` tags are self closing tags.`` ----> `` – Weafs.py Dec 27 '14 at 02:23 — Weafs.py, Dec 27 '14 at 02:23
`.checked` should be `.click` – Barmar Dec 27 '14 at 02:28 — Barmar, Dec 27 '14 at 02:28

score 2 · Answer 1 · answered Dec 27 '14 at 02:31

2

$('input:radio').change(function() {
    var $td = $(this).parent();
    $td.siblings().removeClass('highlight');
    $td.next().addClass('highlight');
});

Here is a fiddle

answered Dec 27 '14 at 02:31

rdubya

2,916
1
16
20

score 1 · Accepted Answer · answered Dec 27 '14 at 02:38

The function to bind a handler is .click, not .checked. Then you need to update the classes of the TD's containing all the checkboxes.

$('input:radio').click(function() {
    $("input:radio").each(function() {
        $(this).closest("td").toggleClass("highlight", $(this).is(":checked"));
    });
});

.highlight {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr id='game_1'>
  <td class='bowl'>Fiesta Bowl</td>
  <td id='radiocell'>
    <input type='radio' name=1 value='Arizona'></input>
  </td>
  <td class='team1'>Arizona</td>
  <td id='radiocell'>
    <input type='radio' name=1 value='Boise State'></input>
  </td>
  <td class='team2'>Boise State</td>
  <td class='gameDay'>January 1</td>
</tr>
</table>

This is great, thanks. I have another CSS selector that seems to override your code here. How can I keep both stylings, but have the click action override the following: #sort td{padding: 10px;font-size: 1em; height: 12px; background: #F0F0F0} — Ryan Miller, Dec 27 '14 at 02:53
Change this selector to `#sort td.highlight`, so it's more specific. — Barmar, Dec 27 '14 at 02:55

score 0 · Answer 3 · answered Dec 27 '14 at 02:54

$('input:radio').change(function( event ) {
    $( "td" ).each(function() {
  $( this ).removeClass( "highlight" );
});
  $( event.target ).closest( "td" ).next("td").addClass("highlight");
});

Here is the working example
http://jsfiddle.net/6bc07guq/

Change color of table cell when radio button is checked

3 Answers3

Linked