Pengendalian Butang Radio dalam JavaScript

Mari kita berlatih dengan butang radio. Ia merupakan sekumpulan suis, di mana hanya satu yang boleh dipilih. Untuk menjadikan beberapa butang radio sebagai satu kumpulan, mereka mesti mempunyai nilai atribut name yang sama:

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

Dan untuk membezakan dalam JavaScript, butang mana yang telah dipilih, setiap butang radio dalam kumpulan ditambahkan atribut value dengan nilai yang berbeza:

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

Untuk menjadikan mana-mana butang radio ditanda secara lalai, ia perlu diberikan atribut checked:

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

Mari kita lihat secara praktikal, bagaimana untuk mengendalikan butang tersebut dalam JavaScript. Katakan kita mempunyai kumpulan butang radio seperti di atas, dan juga sebuah butang biasa:

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

Mari kita buat supaya apabila butang diklik, value bagi butang radio yang sedang ditanda pada masa itu akan dipaparkan pada skrin.

Untuk menyelesaikan tugas ini, adalah perlu untuk mengulangi semua butang radio kita dengan gelung dan menentukan, yang mana satunya dipilih. Untuk ini, perlu membaca nilai sifat checked bagi setiap butang radio yang diulangi. Bagi butang yang sifat ini sama dengan true - butang radio itulah yang dipilih.

Mari laksanakan apa yang diterangkan:

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

Diberi 3 butang radio, perenggan dan butang. Pada klik butang, paparkan value butang radio yang ditanda ke dalam perenggan.