JQuery радио-переключатель переключения класса родительского элемента?

Question

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

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

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

Разметка выглядит следующим образом

<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

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

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

И как уже отмечали другие, сброс зеленого цвета также прост:

Так что просто измените свой код на

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

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

РЕДАКТИРОВАТЬ: как требуется в комментарии, также измените предыдущий тд:

$('#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 2

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

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

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

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

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

Answer 3

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

$('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 4

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

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

Answer 5

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

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

Answer 6

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

забудьте таблицы (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 (), потому что в этом случае они используют ненужные ресурсы.

Answer 7

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

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

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

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

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