Bekerja dengan Radio Button di JavaScript

Sekarang mari kita bekerja dengan radio button. Mereka mewakili sekelompok tombol toggle, di mana hanya satu yang dapat dipilih. Agar beberapa radio button menjadi sebuah grup, mereka harus memiliki nilai atribut name yang sama:

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

Dan untuk membedakan di JavaScript, tombol mana yang dipilih, setiap radio button dalam grup ditambahkan atribut value dengan nilai yang berbeda:

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

Untuk membuat radio button mana pun terpilih secara default, 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 dalam praktiknya, cara bekerja dengan tombol seperti ini di JavaScript. Misalkan kita memiliki grup radio button seperti di atas, dan juga sebuah tombol biasa:

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

Mari kita buat agar ketika tombol ditekan, value dari radio button yang saat ini ditandai akan ditampilkan di layar.

Untuk menyelesaikan tugas ini, perlu untuk mengulang semua radio button kita dengan perulangan dan menentukan mana yang dipilih. Untuk ini, perlu membaca nilai properti checked dari setiap radio button yang diulang. Yang propertinya sama dengan true - radio button itulah yang dipilih.

Mari kita implementasikan yang dijelaskan:

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

Diberikan 3 radio button, sebuah paragraf, dan sebuah tombol. Saat klik pada tombol, tampilkan value dari radio button yang ditandai ke dalam paragraf.