jQuery के माध्यम से कौन सा रेडियो बटन चुना गया है, यह कैसे पता करें: पूर्ण गाइड

यह क्यों महत्वपूर्ण है और रेडियो बटन में कैसे भ्रमित न हों

कल्पना करें: आप एक फीडबैक फॉर्म, सर्वेक्षण या प्रोफ़ाइल सेटिंग्स बना रहे हैं। हर जगह जहां उपयोगकर्ता को कई विकल्पों में से एक का चयन करना होता है, वहां radio buttons काम आते हैं। लेकिन जब क्लाइंट साइड पर चयन को प्रोसेस करने की बात आती है, तो कई शुरुआती (और अनुभवी डेवलपर्स भी) अटक जाते हैं। प्रश्न "How can I know which radio button is selected via jQuery?" Stack Overflow पर सबसे लोकप्रिय में से एक है, और यह व्यर्थ नहीं है: ऐसा लगता है कि सब कुछ सरल है, लेकिन इसमें कई बारीकियाँ हैं।

इस गाइड में, हम jQuery का उपयोग करके चयनित रेडियो बटन का मान प्राप्त करने के कई तरीकों पर चर्चा करेंगे। आप सीखेंगे कि सामान्य गलतियों से कैसे बचें, कोड को साफ कैसे रखें और विभिन्न परिदृश्यों के लिए समाधान कैसे अनुकूलित करें। चलिए शुरू करते हैं!

रेडियो बटन के लिए मूल HTML संरचना

jQuery लिखने से पहले, आइए रेडियो बटन के साथ एक सरल फॉर्म बनाएं। मान लीजिए, हम उपयोगकर्ता से उनकी पसंदीदा प्रोग्रामिंग भाषा के बारे में पूछ रहे हैं:

<form id="surveyForm">\n  <p>आपकी पसंदीदा प्रोग्रामिंग भाषा:</p>\n  <label>\n    <input type="radio" name="language" value="python"> Python\n  </label>\n  <label>\n    <input type="radio" name="language" value="javascript"> JavaScript\n  </label>\n  <label>\n    <input type="radio" name="language" value="java"> Java\n  </label>\n  <br><br>\n  <button type="button" id="getResult">चयन जानें</button>\n</form>

ध्यान दें: सभी रेडियो बटन का एक ही एट्रीब्यूट name="language" है। यही उन्हें एक समूह में बांधता है — केवल एक विकल्प चुना जा सकता है। यदि आपके पास अलग-अलग नाम हैं, तो वे स्वतंत्र समूह होंगे।

विधि #1: jQuery सेलेक्टर :checked — क्लासिक तरीका

सबसे सीधा और अक्सर उपयोग किया जाने वाला तरीका :checked सेलेक्टर को लागू करना है। यह फॉर्म के सभी चिह्नित (चयनित) तत्वों को ढूंढता है। .val() के साथ मिलकर, हम तुरंत मान प्राप्त करते हैं:

$('#getResult').on('click', function() {\n  var selectedValue = $('input[name="language"]:checked').val();\n  if (selectedValue) {\n    alert('आपने चुना: ' + selectedValue);\n  } else {\n    alert('कुछ भी चयनित नहीं!');\n  }\n});

यहाँ क्या हो रहा है?

\n
• $('input[name="language"]:checked') — "language" नाम वाले सभी input में से केवल उन्हें खोजें जो चिह्नित (या डॉट) हैं।
\n
• .val() — मिले तत्व का value एट्रीब्यूट लें।
\n
• जाँच if (selectedValue) — यदि कुछ भी चयनित नहीं है, तो .val() undefined लौटाएगा, और हम एक चेतावनी दिखाएंगे।
\n

यह तरीका तब आदर्श है जब आपके पास रेडियो बटन का एक समूह हो और आपको उनमें से किसी एक का मान प्राप्त करना हो।

विधि #2: लचीलेपन के लिए .filter() और .is() का उपयोग

कभी-कभी आप केवल :checked पर निर्भर नहीं रहना चाहते या आपको चयनित तत्व के साथ अतिरिक्त कार्य करने की आवश्यकता होती है। यहाँ .filter() और .is() विधियाँ काम आती हैं:

$('#getResult').on('click', function() {\n  var selected = $('input[name="language"]').filter(':checked');\n  if (selected.length > 0) {\n    console.log('चयनित तत्व:', selected);\n    var value = selected.val();\n    var id = selected.attr('id');\n    alert('मान: ' + value + ', ID: ' + (id || 'नहीं है'));\n  } else {\n    alert('कृपया एक भाषा चुनें।');\n  }\n});

.filter(':checked') विधि संग्रह से केवल चिह्नित तत्वों को फ़िल्टर करती है। और .is(':checked') का उपयोग किसी विशिष्ट तत्व की जाँच करने के लिए किया जा सकता है:

// जाँचें कि क्या Python चुना गया है\nif ($('input[value="python"]').is(':checked')) {\n  console.log('Python — एक बढ़िया विकल्प!');\n}

यह दृष्टिकोण तब सुविधाजनक होता है जब आपको केवल मान प्राप्त करने की आवश्यकता नहीं होती, बल्कि हेरफेर करने की भी आवश्यकता होती है।