Question

坚持看似简单的任务并尝试了一些变化而没有成功。我有一个表，标签中有一些无线电。每个无线电与同一列中的一组数据协同工作。当我点击其中的无线电时，我想添加/删除一个类或toggleClass，以便在用户选择不同选项时突出显示每一列。

在这里创建了一个我想要完成的示例：

 <form id="myForm">
 <table>
<tr>
<th class="highlightMe option"> <input type="radio" name="radioName" value="1" checked="checked" class="option"/>one 
 </th>
 <th class="noClass option"><input type="radio" name="radioName" value="2" class="option"/>two 
 </th>
  <th class="noClass option"><input type="radio" name="radioName" value="3" class="option"/>three 
  </th>
  </tr>
  <tr>
   <td class="highlightMe">Highlight Me</td>
   <td class="noClass option">Or Highlight Me</td>
   <td class="noClass option">Or highlight three</td>
   </tr>
   </table>
   </form>

一个带背景的简单类，用于突出显示所有表数据列：

.highlightMe {
background:#D32F32;
}

我尝试过的一个失败的脚本：

  $('.option').each(function() {
var $this = $(this);
if($this.attr('checked')) {
    $this.addClass('highlightMe');
 } else {
    $this.removeClass('highlightMe');
 }
});

Answer 1

尝试

jQuery(function($) {
    $('.option').change(function() {
        var $this = $(this), $td = $this.parent(), $tr=$td.parent();

        $tr.next().add($tr).find('.highlightMe').removeClass('highlightMe');

        if(this.checked) {
            $tr.next().find('td').eq($td.index()).add($td).addClass('highlightMe')
        }
    });
});

演示：Fiddle

检查不同的无线电时，在div上切换类

1 个答案: