Question

我希望我的单选按钮单元格旁边的单元格在选中单选按钮时突出显示为绿色，并在移动到未选中时变回灰色。换句话说，包含获胜团队价值的单选按钮应该将包含该团队名称的单元格变为绿色。

＆＃13;

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

＆＃13;

.highlight {
  background: green;
}

＆＃13;

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

＆＃13;

Answer 1

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

这是fiddle

Answer 2

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

＆＃13;

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

＆＃13;

.highlight {
  background: green;
}

＆＃13;

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

＆＃13;

Answer 3

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

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

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

3 个答案: