რადიოღილაკებთან მუშაობა JavaScript-ში

მოდით ახლა ვიმუშაოთ რადიოღილაკებთან. ისინი წარმოადგენენ გადამრთველების ჯგუფს, რომელთაგან მხოლოდ ერთი შეიძლება იყოს არჩეული. რომ რამდენიმე რადიოღილაკი იყოს ჯგუფი, მათ უნდა ჰქონდეთ ატრიბუტის name იგივე მნიშვნელობა:

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

ხოლო JavaScript-ზე გასარჩევად, რომელი ღილაკი იყო არჩეული, თითოეულ რადიოღილაკს ჯგუფში ემატება value ატრიბუტი განსხვავებული მნიშვნელობით:

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

რომ რაიმე რადიოღილაკი იყოს მონიშნული ნაგულისხმევად, მას აუცილებლად უნდა მივანიჭოთ ატრიბუტი checked:

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

მოდით პრაქტიკაში ვნახოთ, როგორ ვიმუშაოთ ასეთ ღილაკებთან JavaScript-ში. მოდით ჩვენ გვქონდეს ზემოთ წარმოდგენილი რადიოღილაკების ჯგუფი, ასევე ჩვეულებრივი ღილაკი:

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

მოდით გავაკეთოთ ისე, რომ ღილაკზე დაწკაპუნებით ეკრანზე გამოჩნდეს value იმ რადიოღილაკის, რომელიც ამ მომენტში არის მონიშნული.

ამოცანის ამოსახსნელად საჭიროა გადავუაროთ ყველა ჩვენი რადიოღილაკი ციკლით და განვსაზღვროთ, რომელი მათგანია არჩეული. ამისთვის საჭიროა წაიკითხოთ თითოეული რადიოღილაკის checked თვისების მნიშვნელობა. რომლისთვისაც ეს თვისება უდრის true - ის რადიოღილაკი და არის არჩეული.

განვახორციელოთ აღწერილი:

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 რადიოღილაკი, აბზაცი და ღილაკი. ღილაკზე დაწკაპუნებით გამოიტანეთ აბზაცში value მონიშნული რადიოღილაკის.