Εργασία με κουμπιά radio στο JavaScript

Ας δουλέψουμε τώρα με κουμπιά radio. Αντιπροσωπεύουν μια ομάδα διακοπτών, από τους οποίους μόνο ένας μπορεί να επιλεγεί. Για να αποτελούν πολλά κουμπιά radio μια ομάδα, πρέπει να έχουν την ίδια τιμή του χαρακτηριστικού name:

<input type="radio" name="elem">
<input type="radio" name="elem">
<input type="radio" name="elem">

Και για να διακρινόμαστε στο JavaScript ποιο ακριβώς κουμπί έχει επιλεγεί, σε κάθε κουμπί radio στην ομάδα προστίθενται χαρακτηριστικά value με διαφορετική τιμή:

<input type="radio" name="elem" value="1">
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

Για να κάνετε ένα κουμπί radio επιλεγμένο από προεπιλογή, είναι απαραίτητο να του ορίσετε το χαρακτηριστικό checked:

<input type="radio" name="elem" value="1" checked>
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

Ας δούμε στην πράξη πώς να δουλεύουμε με τέτοια κουμπιά στο JavaScript. Ας υποθέσουμε ότι έχουμε την παραπάνω ομάδα κουμπιών radio, καθώς και ένα κανονικό κουμπί:

<input type="submit" id="button">

Ας κάνουμε έτσι ώστε με το πάτημα του κουμπιού να εμφανίζεται στην οθόνη το value του κουμπιού radio που είναι επιλεγμένο εκείνη τη στιγμή.

Για την επίλυση του προβλήματος είναι απαραίτητο να διασχίσουμε όλα τα κουμπιά radio μας με έναν βρόχο και να προσδιορίσουμε ποιο από αυτά είναι επιλεγμένο. Για αυτό πρέπει να διαβάζουμε την τιμή της ιδιότητας checked καθενός από τα κουμπιά radio που διασχίζονται. Αυτό του οποίου η ιδιότητα είναι ίση με true - αυτό το κουμπί radio είναι επιλεγμένο.

Ας υλοποιήσουμε τα παραπάνω:

let radios = document.querySelectorAll('input[type="radio"]');
let button = document.querySelector('#button');

button.addEventListener('click', function() {
	for (let radio of radios) {
		if (radio.checked) {
			console.log(radio.value);
		}
	}
});

Δίνονται 3 κουμπιά radio, μια παράγραφος και ένα κουμπί. Με κλικ στο κουμπί εμφανίστε στην παράγραφο το value του επιλεγμένου κουμπιού radio.