Làm việc với nút radio trong JavaScript

Bây giờ hãy cùng làm việc với các nút radio. Chúng đại diện cho một nhóm công tắc chuyển đổi, mà chỉ có một cái có thể được chọn. Để nhiều nút radio là một nhóm, chúng phải có cùng giá trị thuộc tính name:

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

Và để phân biệt trên JavaScript, nút cụ thể nào đã được chọn, mỗi nút radio trong nhóm được thêm thuộc tính value với các giá trị khác nhau:

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

Để làm cho một nút radio nào đó được đánh dấu theo mặc định, cần đặt cho nó thuộc tính checked:

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

Hãy xem thực tế cách làm việc với các nút như vậy trên JavaScript. Giả sử chúng ta có nhóm nút radio được trình bày ở trên, và một nút bấm thông thường:

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

Hãy thực hiện sao cho khi nhấn vào nút, value của nút radio nào đang được đánh dấu tại thời điểm đó sẽ được hiển thị lên màn hình.

Để giải quyết nhiệm vụ cần phải duyệt qua tất cả các nút radio của chúng ta bằng vòng lặp và xác định nút nào được chọn. Để làm điều này cần đọc giá trị thuộc tính checked của mỗi nút radio được duyệt. Nút nào có thuộc tính này bằng true - thì nút radio đó được chọn.

Hãy triển khai điều đã mô tả:

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

Cho 3 nút radio, một đoạn văn và một nút bấm. Khi nhấp vào nút, hãy xuất value của nút radio được đánh dấu vào đoạn văn.