webentwicklung-frage-antwort-db.com.de

Wie kann ich den Radiobutton umschalten?

Angenommen, dies ist mein HTML:

<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 sehen, ist das erste Optionsfeld aktiviert. Ich brauche das Optionsfeld zum Umschalten. Zum Beispiel. Wenn ich erneut auf radio0 klicke, sollten alle Optionsfelder deaktiviert sein.

Wie kann ich das erreichen?

Update: Ich möchte keine zusätzlichen Tasten. Zum Beispiel. Ich könnte eine Schaltfläche hinzufügen und die aktivierte Eigenschaft für alle Optionsfelder auf falsch setzen. Das will ich aber nicht. Ich möchte nur, dass mein Formular aus diesen 4 Optionsfeldern besteht.

Update: Da die meisten Leute nicht verstehen, was ich will, lassen Sie mich versuchen, neu zu formulieren - Ich möchte, dass das Optionsfeld im Umschaltmodus funktioniert. Ich habe allen Optionsfeldern den gleichen Namen gegeben, daher handelt es sich um eine Gruppe. Jetzt möchte ich, dass sich die Radiobuttons selbst umschalten. Z.B. Wenn ich auf radio0 klicke, sollte es deaktiviert sein, wenn es aktiviert ist, und aktiviert sein, wenn es deaktiviert ist.

11
Jack

Das Problem ist, dass sich der Status eines Optionsfelds ändert, sobald es angeklickt wird, bevor Sie es überprüfen können. Ich schlage vor, ein benutzerdefiniertes Attribut hinzuzufügen, um den vorherigen Status jedes Radios wie folgt zu verfolgen:

$(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 müssen dieses Attribut auch zum ursprünglich aktivierten Radio-Markup hinzufügen

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

Sehen Sie die Demo hier: http://jsfiddle.net/GoranMottram/VGPhD/2/

22
Goran Mottram

Wenn Sie zwei oder mehr Optionsfelder gleich benennen, werden sie automatisch zu einer Gruppe. In dieser Gruppe kann nur ein Optionsfeld aktiviert werden. Sie haben dies bereits erreicht.

9
Aashray

Wenn Sie @Goran Mottram verwenden, müssen Sie die Antwort nur ein wenig ändern, um sie an den Fall anzupassen, dass Optionsfelder keine Geschwister sind.

$(".accordian-radio-button").click(function(){
    var wasChecked = true;
    if($(this).data('waschecked') == true){
        $(this).prop('checked', false);
        wasChecked = false;
    }
    $('input[name="ac"]').data('waschecked', false);
    $(this).data('waschecked', wasChecked);
})

<input class="accordian-radio-button" data-waschecked="false" type="radio" name="ac" id="a1" />
0
soumitra

Ich verwende ein onClick () wie das folgende 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');
}
0
Yup.

Ich bin auch darauf gestoßen, nachdem ich darüber nachgedacht und mit den verschiedenen angebotenen Geigen gespielt hatte, hatte ich einige Unzufriedenheiten mit den angebotenen Lösungen.

Mein Hauptproblem war die letzte Zeile der akzeptierten Antwort, für die ein Zurücksetzen erforderlich war:

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

Und da ich jQuery nicht verwende, müsste ich die Geschwister selbst durchgehen und bewerten, was keine große Sache ist, aber mir unelegant vorkam. An dieser Methode führt jedoch kein Weg vorbei, da Sie das Dataset als Informationsspeicher verwenden.

Nachdem ich herumgespielt hatte, stellte ich fest, dass das Problem darin besteht, dass beim Anklicken eines Radios das angeklickte Ereignis ausgelöst wird und sich die mit diesem Klickereignis verbundene Funktion selbst vervollständigt vor die Funktion für das "onchange" -Ereignis wird schon mal ausgewertet , geschweige denn aufgerufen. Wenn also das Klick-Ereignis das Umschalten "deaktiviert", wird kein Änderungsereignis jemals ausgelöst .

Ich habe meinen fehlgeschlagenen Versuch hier gelassen: https://codepen.io/RiverRockMedical/pen/daMGVJ

Wenn Sie jedoch die Frage "Wird nach diesem Klickereignis ein Änderungsereignis eintreten?" Beantworten könnten. dann könnte ein Toggle funktionieren.

Die Lösung, die ich gefunden habe, ist unter folgendem Stift zu sehen: https://codepen.io/RiverRockMedical/pen/VgvdrY

Aber im Grunde ist wie folgt:

function onClick(e) {
  e.dataset.toDo = 'uncheck';
  setTimeout(uncheck, 1, {
    event:'click',
    id:e.id,
    dataset:e.dataset
  });
}

Setzen Sie für das Klickereignis eine Markierung, dass der Klick stattgefunden hat, und verwenden Sie setTimeout (), um eine Pause zu erstellen, mit der das Ereignis onchange ausgewertet und ausgelöst werden kann.

function onChange(e) {
  e.dataset.toDo = 'leave';
}

Wenn das Ereignis onchange ausgelöst wird, wird die Aktion des Ereignisses onclick rückgängig gemacht.

function uncheck(radio) {
  log('|');
  if (radio.event !== 'click') return;
  log('uncheck');
  if (radio.dataset.toDo === 'uncheck') {
    document.getElementById(radio.id).checked = false;
    radio.checked = false;
  } 
}

Wenn die Deaktivierungsfunktion gestartet wird, werden Informationen darüber angezeigt, ob ein Änderungsereignis dem Klickereignis gefolgt ist oder nicht. Wenn nicht, ist das Radio deaktiviert und fungiert als Umschalter.

Und es ist im Grunde genommen selbstzurücksetzend, sodass ich nicht alle Funkgeräte durchlaufen und ihre Datensätze am Ende der Funktion auf die Anfangswerte zurücksetzen muss.

Ich bin mir sicher, dass es eine coolere asynchrone/abwartende Methode gibt, die setTimeout nicht verwendet und noch eleganter wäre, aber ich lerne immer noch und konnte es mir nicht einfallen lassen. Irgendjemand anderes?

0
Dr. Hakeem

Dieser Code hat mein Problem gelöst

$("[type='radio']").on('click', function (e) {
    var previousValue = $(this).attr('previousValue');
    if (previousValue == 'true') {
        this.checked = false;
        $(this).attr('previousValue', this.checked);
    }
    else {
        this.checked = true;
        $(this).attr('previousValue', this.checked);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label >Toogle radio button example</label>
<br />
<input type="radio" name="toogle_me" value="mango"> Blue </input>
<input type="radio" name="toogle_me" value="kiwi"> Green </input>
<input type="radio" name="toogle_me" value="banana"> Yellow </input>
<input type="radio" name="toogle_me" value="orange"> Orange </input>
0
Manish Nayak