2013-02-27 14 views
9

sagen das mein HTML ist:Wie kann ich wechseln RadioButton-

<input type="radio" name="rad" id="Radio0" checked="checked" /> 
<input type="radio" name="rad" id="Radio1" /> 
<input type="radio" name="rad" id="Radio2" /> 
<input type="radio" name="rad" id="Radio4" /> 
<input type="radio" name="rad" id="Radio3" /> 

Wie Sie das erste Optionsfeld aktiviert ist zu sehen. Ich brauche den Radio-Button, um wie Toggle zu funktionieren. Für z. Wenn ich erneut auf radio0 klicke, sollten alle Optionsfelder deaktiviert sein.

Wie kann ich das erreichen?

Update: Ich möchte keine zusätzlichen Tasten. Für z. Ich könnte eine Schaltfläche hinzufügen und die geprüfte Eigenschaft für alle Optionsfelder als falsch festlegen. Das will ich aber nicht. Ich möchte nur, dass meine Form aus diesen 4 Radioknöpfen besteht.

Update: Da die meisten Menschen nicht verstehen, was ich will, lassen Sie mich versuchen, umzuformatieren- Ich möchte die Radio-Taste im Toggle-Modus funktionieren. Ich habe allen Radiobuttons denselben Namen gegeben, daher ist es eine Gruppe. Jetzt möchte ich, dass die Radiobuttons sich selbst umschalten. Z.B. Wenn ich auf radio0 klicke, sollte es deaktiviert werden, wenn es aktiviert ist und wenn es nicht markiert ist.

+0

Ich denke, es ist „alle Optionsfelder sollten überprüft werden“ – 999k

+0

@Toms: Was meinst du damit? – Jack

+1

Sie können nicht mehrere Radiobuttons auswählen, die zu demselben Gruop gehören (mit demselben "Namen" -Wert). Bitte denken Sie an Checkboxen. – Nils

Antwort

18

Das Problem, das Sie finden, ist, dass, sobald ein Optionsfeld seinen Zustand geändert wird geklickt wird, bevor Sie es überprüfen können. Was ich vorschlagen, ist ein benutzerdefiniertes Attribut hinzufügen, um zu verfolgen jedes vorherigen Zustandes des Radios etwa so:

$(function(){ 
    $('input[name="rad"]').click(function(){ 
     var $radio = $(this); 

     // if this was previously checked 
     if ($radio.data('waschecked') == true) 
     { 
      $radio.prop('checked', false); 
      $radio.data('waschecked', false); 
     } 
     else 
      $radio.data('waschecked', true); 

     // remove was checked from other radios 
     $radio.siblings('input[name="rad"]').data('waschecked', false); 
    }); 
}); 

Sie werden auch dieses Attribut auf das zunächst geprüft Radio Markup

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" /> 

hinzufügen müssen siehe Demo hier: http://jsfiddle.net/GoranMottram/VGPhD/2/

+0

Ausgezeichnet !! Genau das Verhalten, das ich brauchte. – Jack

+0

Es gibt ein kleines Problem. Wenn ich das 1. Mal auf das 1. Radio klicke. Es bleibt immer noch überprüft. Kannst du es reproduzieren? – Jack

+0

Ah ja, ich habe die Antwort mit dem Update aktualisiert. Das tut mir leid. –

9

Sobald Sie den Namen von zwei oder mehr Radiobuttons als die gleiche geben, werden sie automatisch eine Gruppe. In dieser Gruppe kann nur ein Optionsfeld überprüft werden. Das hast du schon erreicht.

0

ich verwende eine onClick() wie folgt für meine benutzerdefinierten Radios:

$(function(){ 
    // if selected already, deselect 
    if ($(this).hasClass('selected') { 
    $(this).prop('checked', false); 
    $(this).removeClass('selected'); 
    } 
    // else select 
    else { 
    $(this).prop('checked', true); 
    $(this).addClass('selected'); 
    } 
    // deselect sibling inputs 
    $(this).siblings('input').prop('checked', false); 
    $(this).siblings('input').removeClass('selected'); 
} 
Verwandte Themen