我希望单选按钮被选中时,我的单选按钮的单元格周围的单元格突出显示为绿色,而当移动到未选中状态时,该单元格又​​变回灰色。
换句话说,包含获胜球队价值的单选按钮应将包含该球队名称的单元格变成绿色。



$('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的类。



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

关于jquery - 选中单选按钮时更改表格单元格的颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27663828/

10-08 22:55
查看更多