Radiopainikkeiden käsittely JavaScriptissä

Käsitellään nyt radiopainikkeita. Ne edustavat ryhmää kytkimiä, joista vain yksi voidaan valita. Jotta useat radiopainikkeet muodostaisivat ryhmän, niiden tulee olla saman nimisessä name-attribuutissa:

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

Jotta JavaScriptillä voidaan erottaa, mikä painike on valittu, jokaiselle radiopainikkeelle ryhmässä annetaan value-attribuutit eri arvoilla:

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

Jotta jokin radiopainike olisi oletusarvoisesti valittu, sille on annettava attribuutti checked:

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

Katsotaan käytännössä, miten näiden painikkeiden kanssa työskennellään JavaScriptillä. Olkoon meillä yllä esitetty radiopainikeryhmä sekä tavallinen painike:

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

Tehdään niin, että painiketta klikkaamalla ruudulle tulostuu value sen radiopainikkeen arvo, joka on tällä hetkellä valittu.

Tehtävän ratkaisemiseksi on käytävä läpi kaikki radiopainikkeet silmukalla ja määritettävä, mikä niistä on valittu. Tätä varten on luettava jokaisen läpikäytävän radiopainikkeen checked -ominaisuuden arvo. Jonka tämä ominaisuus on yhtä kuin true - se radiopainike on valittu.

Toteutetaan kuvailtu:

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);
		}
	}
});

Annettu 3 radiopainiketta, kappale ja painike. Kun klikataan painiketta, tulosta kappaleeseen value valitun radiopainikkeen arvo.