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    

Artikel empfehlen

Analyse des Sperrmechanismus der MySQL-Datenbank

Bei gleichzeitigen Zugriffen kann es zu nicht wie...

Eine elegantere Methode zur Fehlerbehandlung in JavaScript async await

Inhaltsverzeichnis Hintergrund Warum Fehlerbehand...

Wettersymbol-Animationseffekt implementiert durch CSS3

Ergebnisse erzielen Implementierungscode html <...

Lizenzschlüssel für VMware Workstation Pro 16 mit Nutzungs-Tutorial

VMware Workstation ist eine leistungsstarke virtu...

Beispielanalyse des Prinzips und der Lösung des MySQL-Gleitreihenfolgeproblems

Dieser Artikel erläutert anhand von Beispielen da...

Die 13 am häufigsten in Interviews gestellten Fragen zu Vue-Modifikatoren

Inhaltsverzeichnis 1. faul 2.trimmen 3.Nummer 4.H...

Probleme bei der Installation von MySQL 8.0 und beim Zurücksetzen des Kennworts

Mysql 8.0 Installationsprobleme und Passwort-Rese...

So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind

Vorwort Wenn beim kontinuierlichen Code-Delivery-...