JQuery radio onchange toggle класс родительского элемента?

Ответ 1

Попробуйте что-то вроде этого:

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

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

В качестве альтернативы, если на странице имеется только одна группа переключателей, это будет проще:

$('.green').removeClass('green');

Ответ 2

Вы не должны использовать событие 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');
    }
});

Ответ 3

Попробуйте следующее:

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

Ответ 4

Я просто написал решение, которое не заботится о том, насколько глубоко вложены радиокнопки, он просто использует атрибут 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 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');
    }
});

Ответ 5

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

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

Ответ 6

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

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
• устанавливает класс родителя для значения по умолчанию для переключателя.

Надеюсь, это поможет!

Ответ 7

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

забудьте о таблицах (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;
}

и используя этот script, вы можете сделать то же самое, что хотите

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

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