Wie überprüft man einen Auswahlknopf mit JavaScript oder jQuery

1. Auswahlknopf mit JavaScript prüfen
2. Auswahlknopf mit jQuery prüfen
3. Aktivieren Sie das Optionsfeld basierend auf einem Tastenklick

Wir verwenden häufig Client-seitiges Scripting wie jQuery oder JavaScript, um interaktive und schnell reagierende Websites zu erstellen und können einfache Operationen wie Formularvalidierungen effizient durchführen, ohne dass eine zusätzliche Reise zum Webserver erforderlich ist.

In einem Szenario, in dem ein Radio-Button standardmäßig oder bei einem Button-Click-Ereignis ausgewählt werden soll, können wir JavaScript oder jQuery verwenden.

Beginnen wir mit der Definition eines Formulars.

    <div id='radiobuttonset'>
        <input type='radio' id='myradio_1' name='radiobutton' value='1' />1
        <input type='radio' id='myradio_2' name='radiobutton' value='2' />2
        <input type='radio' id='myradio_3' name='radiobutton' value='3' />3 
    </div>

Auswahlknopf mit JavaScript prüfen

Wählen Sie den Auswahlknopf über ID

Eine der besten Möglichkeiten zur Vorauswahl eines Auswahlknopfes besteht darin, ihn über seine ID zu referenzieren. Um das DOM-Element über die ID auszuwählen, fügen wir der ID das Präfix # hinzu und setzen den überprüften Wert auf true.

document.querySelector('#myradio_1').checked = true;

Ausgabe: Auswahlknopf 1 ist ausgewählt.

Wählen Sie den Auswahlknopf mit dem Wert

Eine alternative Möglichkeit besteht darin, den Wert des Auswahlknopfes zur Vorauswahl des Auswahlknopfes zu verwenden. Die Auswahl nach Wert kann in Szenarien nützlich sein, in denen wir die ID eines Auswahlknopfes nicht kennen, aber den Wert kennen.

Wir können die ID des übergeordneten div verwenden und das Element auswählen, dessen Wert 2 ist. Dann können wir das Attribut checked auf true setzen.

document.querySelector('#radiobuttonset > [value="2"]').checked = true;

Ausgabe: Der Auswahlknopf 2 ist ausgewählt.

In einigen Fällen, in denen wir wissen, dass es keine anderen Elemente im DOM gibt, die dem vordefinierten Wert entsprechen, können wir das Element auswählen, indem wir einfach prüfen, ob der Wert checked ist. In diesem Fall benötigen wir die übergeordnete ID nicht.

document.querySelector('[value="3"]').checked = true;

Ausgabe: Auswahlknopf 3 ist ausgewählt.

Auswahlknopf mit jQuery prüfen

Abgesehen von der Verwendung von JavaScript können wir auch die jQuery-Bibliothek verwenden, um ein Optionsfeld basierend auf einem vordefinierten Wert zu prüfen. jQuery ist eine Bibliothek, die mit JavaScript erstellt wurde. Sie hilft, das Durchqueren und die Manipulation des HTML-DOM zu vereinfachen. Auch die Syntax von jQuery ist einfacher als die von JavaScript.

Um jQuery hinzuzufügen, fügen Sie einen Verweis auf die jQuery-Bibliothek entweder aus dem CDN oder aus einer lokalen Datei hinzu.

Wählen Sie den Auswahlknopf mit ID

Wie JavaScript verwenden wir für den Zugriff auf das DOM-Element mittels ID das Präfix #. Die genaue Syntax hängt jedoch von der verwendeten Version von jQuery ab.

Die aktuelle stabile jQuery-Version ist 3.4.1.

Die Version von jQuery ist gleich oder höher (>=) 1.6

Wenn die verwendete Version von jQuery größer oder gleich 1.6 ist, verwenden wir prop, um das Attribut checked auf true zu setzen.

$('#myradio_1').prop('checked', true);

Ausgabe: Auswahlknopf 1 ist ausgewählt.

Die Version von jQuery ist Versionen vor (<) 1.6

Wenn die Version von jQuery vor 1.6 ist, können wir das attr wie geprüft aktualisieren.

$('#myradio_2').attr('checked', 'checked');

Ausgabe: Auswahlknopf 2 ist ausgewählt

Wählen Sie den Auswahlknopf, indem Sie den Wert

Wir können den ausgewählten Wert für den Auswahlknopf auch auf der Grundlage des Wertes des Knopfes aktualisieren.

$('input[name=radiobutton][value=\'1\']').prop('checked', true);

Ausgabe: Auswahlknopf 2 ist ausgewählt

Aktivieren Sie das Optionsfeld basierend auf einem Tastenklick

Sobald wir wissen, wie wir die Optionsschaltfläche mit JavaScript oder jQuery aktualisieren können, können wir die Auswahl auf der Grundlage eines Ereignisses wie einem Schaltflächen-Klick oder durch eine andere Elementauswahl aktualisieren. Um dies zu testen, lassen Sie uns unser Formular aktualisieren, um eine Schaltfläche hinzuzufügen.

<div id='radiobuttonset'>
     <input type='radio' id='myradio_1' name='radiobutton' value='1' />1
     <input type='radio' id='myradio_2' name='radiobutton' value='2' />2
     <input type='radio' id='myradio_3' name='radiobutton' value='3' />3 
</div>
    <button id="button_1">check 1</button>

Wir können dann ein Ereignis click auf die Schaltfläche hinzufügen. Bei einem Klick wird der erste Auswahlknopf ausgewählt.

$('#button_1').click(function() {
  $('input[name=radiobutton]').val(['1']);
});

Ausgabe: Auswahlknopf 1 wird ausgewählt