रेडियो बटन चयन का प्रोग्रामेटिक नियंत्रण

इंटरैक्टिव फॉर्म बनाने के लिए रेडियो बटन आवश्यक हैं, जो उपयोगकर्ताओं को किसी समूह से एकल विकल्प चुनने का तरीका प्रदान करते हैं। यह गाइड जावास्क्रिप्ट और jQuery का उपयोग करके रेडियो बटन चयन को प्रोग्रामेटिक रूप से नियंत्रित करने का तरीका दर्शाता है, जिससे आपके वेब अनुप्रयोगों की कार्यक्षमता बढ़ती है।

विषयसूची

• जावास्क्रिप्ट के साथ रेडियो बटन चेक करना
• jQuery के साथ रेडियो बटन चेक करना
• बटन क्लिक्स पर प्रतिक्रिया देना

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

जावास्क्रिप्ट रेडियो बटन चयन को प्रबंधित करने का एक सीधा तरीका प्रदान करता है। मूल अवधारणा में रेडियो बटन तत्व तक पहुँचना और इसके checked गुण को संशोधित करना शामिल है।

// अपनी ID से रेडियो बटन तत्व प्राप्त करें
const radioButton = document.getElementById('myRadioButton');

// यह जांचने के लिए कि तत्व मौजूद है या नहीं, इससे पहले कि आप उस तक पहुँचने का प्रयास करें।
if (radioButton) {
  radioButton.checked = true;
} else {
  console.error("ID 'myRadioButton' वाला रेडियो बटन नहीं मिला।");
}

यह स्निपेट अपनी ID का उपयोग करके रेडियो बटन को पुनः प्राप्त करता है और checked गुण को true पर सेट करता है। if कथन यह सुनिश्चित करता है कि यदि तत्व नहीं मिला है, तो एक त्रुटि संदेश प्रदर्शित किया जाता है, जिससे अप्रत्याशित त्रुटियों को रोका जा सकता है। अपने वास्तविक रेडियो बटन की ID के साथ 'myRadioButton' को बदलना याद रखें। महत्वपूर्ण बात यह है कि एक ही समूह के भीतर रेडियो बटन एक सामान्य name विशेषता साझा करते हैं। एक का चयन करने से समूह में अन्य स्वतः ही अचयनित हो जाते हैं।

<input type="radio" id="myRadioButton" name="radioGroup" value="option1"> विकल्प 1

jQuery के साथ रेडियो बटन चेक करना

jQuery DOM हेरफेर को सरल बनाता है। इसका संक्षिप्त सिंटैक्स तत्वों का चयन और प्रबंधन करना काफी आसान बनाता है।

// अपनी ID का उपयोग करके रेडियो बटन चेक करें
$('#myRadioButton').prop('checked', true);

यह jQuery कोड ID द्वारा रेडियो बटन का चयन करने के लिए $() फ़ंक्शन और checked गुण सेट करने के लिए .prop() विधि का उपयोग करता है। जबकि .attr('checked', 'checked') भी संभव है, बूलियन विशेषताओं के लिए .prop() को आम तौर पर प्राथमिकता दी जाती है क्योंकि यह तत्व की स्थिति को सटीक रूप से दर्शाता है।

बटन क्लिक्स पर प्रतिक्रिया देना

अक्सर, आप किसी बटन के क्लिक के जवाब में एक रेडियो बटन चेक करना चाहेंगे। निम्नलिखित उदाहरण दर्शाते हैं कि जावास्क्रिप्ट और jQuery दोनों का उपयोग करके यह कैसे किया जाता है।

जावास्क्रिप्ट

const button = document.getElementById('myButton');
const radioButton = document.getElementById('myRadioButton');

button.addEventListener('click', function() {
  if (radioButton) {
    radioButton.checked = true;
  } else {
    console.error("ID 'myRadioButton' वाला रेडियो बटन नहीं मिला।");
  }
});

<button id="myButton">रेडियो बटन चेक करें</button>
<input type="radio" id="myRadioButton" name="radioGroup" value="option1"> विकल्प 1

jQuery

$('#myButton').click(function() {
  $('#myRadioButton').prop('checked', true);
});

दोनों उदाहरण एक बटन (ID: myButton) में एक क्लिक ईवेंट श्रोता जोड़ते हैं। बटन पर क्लिक करने से संबंधित रेडियो बटन का checked गुण true पर सेट हो जाता है। अपने HTML से मेल खाने के लिए ID को समायोजित करना याद रखें।

यह गाइड जावास्क्रिप्ट और jQuery का उपयोग करके रेडियो बटन चयन को नियंत्रित करने के लिए एक व्यापक दृष्टिकोण प्रदान करता है, जिससे आपके वेब फॉर्म की अंतःक्रियाशीलता बढ़ती है। अपने अनुप्रयोग की स्थिरता सुनिश्चित करने के लिए हमेशा मजबूत त्रुटि हैंडलिंग लागू करें।