जावास्क्रिप्ट में रेडियो बटन के साथ काम करना

आइए अब रेडियो बटन के साथ काम करते हैं। ये स्विचों का एक समूह है, जिसमें से केवल एक ही चुना जा सकता है। कई रेडियो बटनों के एक समूह के रूप में होने के लिए, उनके पास विशेषता का समान मान होना चाहिए name:

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

और जावास्क्रिप्ट पर यह अंतर करने के लिए कि कौन सा बटन चुना गया था, प्रत्येक रेडियो बटन में समूह को विभिन्न मानों के साथ 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">

आइए व्यवहार में देखें, कैसे काम करें जावास्क्रिप्ट पर ऐसे बटनों के साथ। मान लीजिए कि हमारे पास ऊपर प्रस्तुत रेडियो बटनों का समूह है, और एक साधारण बटन भी:

<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 प्रदर्शित करें चयनित रेडियो बटन का।