Detaillierte Erläuterung zum Abrufen, Zuweisen und Registrieren von Radiowerten in HTML

Detaillierte Erläuterung zum Abrufen, Zuweisen und Registrieren von Radiowerten in HTML
1. Radiogruppierung

Solange der Name gleich ist, handelt es sich um eine Gruppe, d. h., in einer Gruppe kann nur einer ausgewählt werden, und zwar wie folgt:

Code kopieren
Der Code lautet wie folgt:

<span>Gruppe1:</span>
<input type="radio" id="radio1" aktiviert="aktiviert" name="group1" />radio1
<input type="radio" id="radio2" name="gruppe1" />radio2
<input type="radio" id="radio3" name="gruppe1" />radio3

<span>Gruppe2:</span>
<input type="radio" id="radio4" aktiviert="aktiviert" name="group2" />radio4
<input type="radio" id="radio5" name="gruppe2" />radio5
<input type="radio" id="radio6" name="gruppe2" />radio6

Die Wirkung ist wie folgt:


2. Holen Sie sich den ausgewählten Funkknoten

Dies lässt sich ganz einfach mit jQuery erledigen. Wählen Sie zunächst die Gruppe aus und filtern Sie dann die markierten wie folgt heraus:


Code kopieren
Der Code lautet wie folgt:

var Gruppe1 = $("[name='Gruppe1']").filter(":aktiviert");
Konsole.log(Gruppe1.attr("id"));

3. Wählen Sie einen Funkknoten

Verwenden Sie jQuery, um das aktivierte Attribut festzulegen:

Code kopieren
Der Code lautet wie folgt:

$("#radio2").attr("aktiviert", "aktiviert");

4. Wählen Sie einen Funkknoten

Entfernen Sie das aktivierte Attribut:

Code kopieren
Der Code lautet wie folgt:

$("#radio1").removeAttr("aktiviert");

Dies kann dazu führen, dass keines der Funkgeräte in einer Gruppe ausgewählt ist.

5. Registrieren Sie die ausgewählten und nicht ausgewählten Ereignisse

Oder verwenden Sie die On-Funktion von jQuery, um das Änderungsereignis wie folgt zu registrieren:

Code kopieren
Der Code lautet wie folgt:

$("[name='group1']").on("ändern",
Funktion (e) {
Konsole.log($(e.target).val());
}
);

Auf diese Weise wird die Funktion ausgelöst, solange irgendein Element in Gruppe 1 ausgewählt ist.

<<:  Perfekte Lösung für den Themenwechsel basierend auf CSS-Variablen (empfohlen)

>>:  Tutorial zur Verwendung von $attrs und $listeners in Vue

Artikel empfehlen

vue realisiert die Anpassung der Spaltenbreite von el-table perfekt

Inhaltsverzeichnis Hintergrund Technische Lösung ...

GET POST Unterschiede

1. „Get“ wird verwendet, um Daten vom Server abzu...

Modulare CSS-Lösung

Es gibt wahrscheinlich ebenso viele modulare Lösu...

Detaillierte Erklärung der Speicher-Engine in MySQL

Übersicht über die MySQL-Speicher-Engine Was ist ...

Javascript implementiert die Webversion des Flipperspiels

Das mit JavaScript-Objekten und -Methoden impleme...

Umfassende Zusammenfassung der MySQL-Funktionen

Inhaltsverzeichnis 1. Häufig verwendete Zeichenfo...

Detaillierte Erklärung zur SQL-Injection - Sicherheit (Teil 2)

Sollte dieser Artikel Fehler enthalten oder du An...

Detaillierte Installationshistorie von Ubuntu 20.04 LTS

In diesem Artikel wird die Erstellung einer USB-S...