Переключить классы на div, когда проверяются разные радиостанции

Застрял на том, что кажется простой задачей, и безуспешно пробовал несколько вариантов. У меня есть таблица, в тегах которой есть несколько радиостанций. Каждое радио взаимодействует с группой данных, находящихся в одном столбце. Когда я нажимаю на радиоприемники в , я хочу добавить/удалить класс или toggleClass, чтобы каждый столбец выделялся, когда пользователь выбирает разные параметры.

Создал пример скрипта того, что я пытаюсь здесь сделать:

JS FIDDLE

 <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');
 }
});

jquery radio checked addclass toggleclass
person isaac weathers    schedule 26.04.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Пытаться

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

person Arun P Johny    schedule 26.04.2014
comment
ЯХТЗИ!!! Я даже не был рядом. Спасибо (еще раз) Арун! Отметил ваш ответ как правильный. - person isaac weathers; 26.04.2014