Изменение класса ячейки при смене переключателя

Question

Огромное спасибо за помощь в этой теме - Нажмите td, выберите переключатель в jQuery

Но теперь у меня проблема с тем, что он не изменит класс ячейки, хотя я связал триггер «изменение» в jQuery следующим образом:

    $("td input[type=radio]").bind('change click', function () {

    $('td').removeClass('selected');
    $(this).parent('td').addClass('selected');

});

$("td").click(function () {

   $('input:radio', this).attr('checked', true);

});

Надеюсь, что это имеет смысл.Если вы щелкнете переключатель или переместитесь между ними с помощью клавиатуры, класс ячейки изменится очень хорошо.Однако, если вы активируете это, щелкнув по ячейке, класс не изменится: (

Спасибо

Answer 1

Ни событие click, ни change не сработает при изменении атрибутов элемента.Так что вам придется запускать его вручную.Кроме того, я предпочитаю связывать как можно больше, и в этом случае мы можем использовать функцию siblings().Как следует из названия, он выберет всех братьев и сестер (в вашем случае все остальные <td> элементы, которые имеют selected класс) текущего элемента.

Вот так:

$("td input:radio").bind('change click', function(){ 
    $(this).parent('td').addClass('selected').siblings('.selected').removeClass('selected');
});

$("td").click(function () {
    $('input:radio', this).attr('checked', 'checked').trigger('change');
});

Также, согласно спецификациям HTML, атрибут checked имеет только checked в качестве допустимого значения.Однако, поскольку большинство (если не все) браузеры анализируют этот атрибут как логическое значение, где пустое или несуществующее означает false, а любое другое значение означает true, тем не менее, это будет работать, но я лично предпочитаю следовать спецификациям.

Answer 2

Попробуйте использовать:

$("td input:radio").bind('change click', function() {

    $('td.selected').removeClass('selected');
    $(this).parent('td').addClass('selected');

});

Кажется, что работает: JS Fiddle demo .