jQuery Radio onChange Klasse von Elternelement wechseln?

Question

Weitere Informationen finden sie auf der folgenden:

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

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

Markup lookslike etwas wie folgt

<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>

Wenn ich wechsle Radio, über Javascript-Code 'grün' zu TD-Tag gilt, was in Ordnung ist. Aber wenn ich die Wahl zu einem anderen wechseln fügt es das Grün zu einem anderen, aber das Grün von dem zuvor ausgewählten Radio doesnt zu entfernen.

Wie kann ich es so funktioniert, dass eine Funkoption Auswahl ändert seine Eltern TD Klasse zu grün und die Auswahl eines anderen alle zurückgesetzt werden, sondern nur die neu gewählte grün addieren!

Kann es auch gemacht werden Klasse seines ersten vorherigen TD zu ändern, die „einen Text 3“ etc ??

enthält

Danke.

Answer 1

Versuchen Sie etwas wie folgt aus:

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

Dies wird das Tabellenelement der aktuellen Optionsfeld Gruppierung finden, alle Elemente mit der grünen Klasse finden, und die Klasse entfernen.

Alternativ, wenn Sie nur eine Optionsfeldgruppe auf der Seite haben, es wäre einfacher, nur tun:

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

Answer 2

Sie sollten nicht die Änderung () Ereignis auf Radio-Buttons und Checkboxen verwenden. Es verhält sich ein wenig vertrackt und inkonsistent in allen Browsern (es verursacht Probleme in allen Versionen von IE)

Mit der Taste () Ereignis statt (keine Sorge über die Zugänglichkeit, weil das Click-Ereignis auch ausgelöst werden, wenn Sie aktivieren / wählen Sie ein Optionsfeld mit der Tastatur)

Und wie die anderen hier darauf hingewiesen, das grüne Zurücksetzen ist einfach wie gut:

So einfach Ihren Code zu ändern, um

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

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

EDIT: wie in Kommentar gebeten, auch die vorherige td ändern:

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

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

oder noch besser, drehen alle td Elemente der übergeordneten Zeile grün:

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

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

Answer 3

Versuchen Sie folgendes:

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

Answer 4

Ich schrieb nur eine Lösung, die nicht, wie tief die Radio-Buttons verschachtelt schert sind, verwendet er nur den Namen Attribut der Radio-Buttons. Das bedeutet, dieser Code würde überall ohne Änderungen arbeitet, denke ich - ich, es zu schreiben, seit ich eine seltsame Situation, wo ein Optionsfeld verschachtelt ist anders als seine Kohorten mit dem gleichen Namen

.

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

mein Vorschlag ist:

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

Answer 6

Hier ist die Lösung, die gut für mich gearbeitet:

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

Features:

• Schneller. Nur wählt Liste von Kontrollkästchen einmal.
• Ist auf nicht verlassen: geprüft. Ich bin mir nicht sicher, ob es eine bestimmte Reihenfolge, in der „geklickt“ und „geändert“ wird ausgeführt in allen Browsern.
• verwendet: Radio anstelle von [type = "radio"], das ist jQuery empfohlen
• setzt Klasse auf dem übergeordneten für den Standardwert von Optionsfeld.

Hope, das hilft!

Answer 7

Ich denke, das ist die beste und flexiblere Art und Weise, dies zu tun:

vergessen die Tabellen (Google viele Grund dafür wissen) und verwenden Wrapper wie unter

<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

Format mit CSS wie folgt

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

und mit diesem Skript können Sie genau das gleiche tun, wie Sie wollen

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

Ich mag nicht Filter verwenden () und finden (), weil sie in diesem Fall nicht notwendig Ressourcen.