选中单选按钮时更改表格单元格的颜色答案

【问题标题】：Change color of table cell when radio button is checked选中单选按钮时更改表格单元格的颜色
【发布时间】：2015-02-24 03:52:11
【问题描述】：

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

$('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>

【问题讨论】：

<input> 标签是自闭合标签。<input type='radio' name=1 value='Arizona'></input> ----> <input type='radio' name=1 value='Arizona' />
.checked 应该是.click

标签： jquery css button colors radio

【解决方案1】：

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

这是fiddle

【讨论】：

【解决方案2】：

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

$('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>

【讨论】：

这太好了，谢谢。我有另一个 CSS 选择器，它似乎在这里覆盖了您的代码。如何保留两种样式，但让点击操作覆盖以下内容：#sort td{padding: 10px;font-size: 1em;高度：12px；背景：#F0F0F0}
将此选择器更改为#sort td.highlight，这样更具体。

【解决方案3】：

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

这是工作示例
http://jsfiddle.net/6bc07guq/

【讨论】：