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

Question

Пожалуйста, посмотрите на следующее:

$('#myRadio').change(function() {   

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

Markup lookslike несколько следующим

<table> 
    <tr> 
    <td>Some text 1 </td> 
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td> 
    <td>Some text 2 </td> 
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td> 
    <td>Some text 3 </td> 
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td> 
    </tr> 
</table> 

Когда я включаю радио, выше Javascript код применяется 'зеленый' в TD тег, который прекрасен. Но если я изменю выбор на другой, он добавит зеленый в другой, но не удалит зеленый из ранее выбранного радио.

Как сделать так, чтобы выбор радиостанции менял свой родительский класс TD на зеленый, и выбор другого сбрасывает все, кроме добавления зеленого, только для вновь выбранного!

Можно ли также изменить класс его предыдущего предыдущего TD, который содержит «некоторый текст 3» и т. Д.?

Спасибо.

Answer 1

попробовать что-то вроде этого:

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

Найдет таблицу элемент текущей кнопки радио группировки, найти какие-либо элементы с зеленым классом, и удалить класс.

С другой стороны, если у вас есть только один радио группы кнопок на странице, было бы проще просто:

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

Answer 2

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

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

Answer 3

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

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

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

так просто изменить код

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

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

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

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

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

Answer 5

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

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

Особенности:

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

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

Answer 6

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

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

Answer 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; 
} 

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

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

я не люблю использовать фильтр() и найти(), потому что они используют излишние ресурсы в этом случае.