jQuery radio onchange переключает класс родительского элемента?

вы не должны использовать событие change () на переключателях и флажках. Он ведет себя немного затянуто и непоследовательно в разных браузерах (это вызывает проблемы во всех версиях IE)

вместо этого используйте событие click () (не беспокойтесь о доступности, потому что событие click также будет запущено, если вы активируете/выбираете переключатель с помощью клавиатуры)

и, как указывали другие здесь, сброс зеленого также легко:

поэтому просто измените свой код к

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    }
});

EDIT: как запрошено в комментарии, также измените предыдущий td:

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().prev().andSelf().addClass('green');
    }
});

или даже лучше, поворачивая все элементы td родительской строки зеленым цветом:

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parents("tr").find("td").addClass('green');
    }
});

попробуйте это:

if($(this).is(':checked')) {
    $(this).parent().siblings('td.green').removeClass('green');
    $(this).parent().addClass('green');
}

Я только что написал решение, которое не заботится о том, насколько глубоко вложены переключатели, оно просто использует атрибут name переключателей. Это означает, что этот код будет работать без изменений в любом месте, я думаю - я должен был написать его, так как у меня странная ситуация, когда один переключатель вложен иначе, чем его когорты с тем же именем.

$('input[type="radio"]').change( function() {
    // grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');

    // iterate through each  
    // if checked, set its parent label's class to "selected"
    // if not checked, remove the "selected" class from the parent label
    // my HTML markup for each button is  <label><input type="radio" /> Label Text</label>
    // so that this works anywhere even without a unique ID applied to the button and label
    for (var i=0; i < this_radio_set.length;i++) {
        if ( $(this_radio_set[i]).is(':checked') ) $(this_radio_set[i]).parents('label').addClass('selected');
        else $(this_radio_set[i]).parents('label').removeClass('selected');
    }
});

мое предложение :

$('#myRadio').change(function() {           
    _parent = $(this).parent();
    if($(this).is(':checked'))  {
       _parent.addClass('green');
    } else {                              
       _parent.removeClass('green');
    }
});

вот решение, которое отлично сработало для меня:

var $boxes=$('input:radio');
var $parents = $boxes.parent();
$boxes.click(function(){
    $parents.filter('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});
$boxes.filter(':checked').parent().addClass('selected');

характеристики:

• быстрее. Выбирает список флажков только один раз.
• не полагается на: проверено. Я не уверен, есть ли определенный порядок, в котором "щелкнуто" и "изменено" будет выполняться в браузерах.
• использует: радио вместо [type= "radio"], который рекомендуется jQuery
• устанавливает класс на родительском для значения по умолчанию радио кнопка.

надеюсь, что это помогает!

Я думаю, что это лучший и более гибкий способ сделать это:

забудьте таблицы (google знает много причин для этого) и используйте обертки, как показано ниже

<div id="radio_wrapper">
    <span class="radio">
        <label for="myRadio1" class="myRadio">Some text 1 </label>
        <input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio2" class="myRadio">Some text 2 </label>
        <input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio3" class="myRadio">Some text 3 </label>
        <input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" />
    </span>
</div

формат с CSS, как это

span.radio {
    background-color: #cccccc;
}
span.currentGreen {
    background-color: #ccffcc;
}

и с помощью этого скрипта вы можете делать точно так же, как вы хотите

$('.myRadio').change(function() {           
    $('.currentGreen').removeClass('currentGreen'); // remove from all
    if ($(this).is(':checked')) {
        $(this).parent().addClass('currentGreen'); // add to current
    }
});

мне не нравится использовать filter () и find (), потому что в этом случае они используют ненужные ресурсы.