选中单选按钮时更改表格单元格的颜色 [英] Change color of table cell when radio button is checked

问题描述

我希望选中单选按钮时，与我的单选按钮的单元格相邻的单元格以绿色突出显示，并在移至未选中状态时使其变回灰色. 换句话说，包含获胜团队价值的单选按钮应将包含该团队名称的单元格变成绿色.

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>

推荐答案

绑定处理程序的函数是.click，而不是.checked.然后，您需要更新包含所有复选框的TD的类.

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>

这篇关于选中单选按钮时更改表格单元格的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！