जाँच कैसे करें कि jQuery में checkbox चयनित है या नहीं: उदाहरणों के साथ पूर्ण गाइड

jQuery में checkbox चयनित है या नहीं, यह कैसे जाँचें: शुरुआती लोगों के लिए चरण-दर-चरण ट्यूटोरियल

नमस्ते दोस्त! यदि आपने कभी वेब पेज पर फॉर्म के साथ काम किया है, तो आपने निश्चित रूप से इस कार्य का सामना किया होगा: "क्या यह checkbox चयनित है?"। यह एक छोटी सी बात लगती है, लेकिन ये छोटी-छोटी बातें अक्सर अनुभवी डेवलपर्स को भी असमंजस में डाल देती हैं। Stack Overflow पर प्रश्न "How do I check whether a checkbox is checked in jQuery?" ने हजारों बार देखा गया है, जिसका मतलब है कि यह विषय वास्तव में महत्वपूर्ण है।

इस ट्यूटोरियल में, मैं केवल शुष्क सिंटैक्स नहीं दिखाऊंगा। हम कई तरीकों पर चर्चा करेंगे, उनकी तुलना करेंगे, पता लगाएंगे कि कहाँ समस्याएँ हैं, और सुंदर, काम करने वाला कोड लिखेंगे। चलिए शुरू करते हैं!

यह क्यों महत्वपूर्ण है? (और इसमें jQuery का क्या योगदान है?)

आजकल कई लोग शुद्ध JavaScript पर स्विच कर रहे हैं, लेकिन jQuery अभी भी लाखों प्रोजेक्ट्स में जीवित है: पुरानी साइटों से लेकर आधुनिक एडमिन पैनल तक। :checked और .prop() / .attr() विधियों के साथ काम करने का ज्ञान एक बुनियादी बात है जो आपको डीबगिंग में घंटों बचाएगी।

कल्पना करें: आप एक रजिस्ट्रेशन फॉर्म बना रहे हैं जहाँ शर्तों से सहमत होना आवश्यक है। या उत्पाद फ़िल्टर वाला एक ऑनलाइन स्टोर। checkbox की स्थिति की जाँच के बिना काम नहीं चलेगा।

तरीका #1: क्लासिक — .prop() विधि

आधुनिक और सही तरीका। jQuery 1.6 से, बूलियन एट्रीब्यूट (checked, disabled, selected) के लिए .prop() का उपयोग करना चाहिए।

// HTML\n<input type="checkbox" id="agree"> मैं शर्तों से सहमत हूँ\n\n// jQuery\nif ($('#agree').prop('checked')) {\n    console.log('Checkbox चयनित है!');\n} else {\n    console.log('Checkbox चयनित नहीं है।');\n}

यह क्यों काम करता है? .prop() DOM एलिमेंट की प्रॉपर्टी तक पहुँचता है, जो हमेशा true या false लौटाती है। यह तेज़, विश्वसनीय और बिना किसी आश्चर्य के है।

तरीका #2: :checked सेलेक्टर (संक्षिप्त)

और भी छोटा चाहते हैं? :checked स्यूडोसेलेक्टर का उपयोग करें। यह सीधे सेलेक्टर में जाँचता है कि एलिमेंट चयनित है या नहीं।

if ($('#agree:checked').length) {\n    console.log('चयनित!');\n} else {\n    console.log('चयनित नहीं।');\n}

या और भी सुंदर:

if ($('#agree').is(':checked')) {\n    console.log('चयनित!');\n}

.is() विधि true लौटाती है यदि चयन में कम से कम एक एलिमेंट सेलेक्टर से मेल खाता है। सुंदर और पढ़ने योग्य।

तरीका #3: पुराना .attr() — सावधान, समस्या!

कभी-कभी पुराने ट्यूटोरियल में आपको ऐसा कोड मिलेगा:

// खराब उदाहरण\nif ($('#agree').attr('checked')) {\n    console.log('चयनित');\n}

ऐसा मत करें! .attr() HTML एट्रीब्यूट पढ़ता है, जो उपयोगकर्ता के क्लिक करने के बाद नहीं बदलता है। यह केवल undefined या स्ट्रिंग "checked" लौटाएगा यदि एट्रीब्यूट शुरू में HTML में लिखा गया हो। यह डायनामिक स्थिति को ट्रैक नहीं करता है। बग पकड़ें?

लाइव उदाहरण: कई checkboxes वाला फॉर्म

आइए सब कुछ एक साथ रखें। कल्पना करें कि हमारे पास शौक की एक सूची है, और हम जानना चाहते हैं कि उपयोगकर्ता ने कौन से चुने हैं।

<h3>अपने शौक चुनें:</h3>\n<label><input type="checkbox" class="hobby" value="coding"> प्रोग्रामिंग</label>\n<label><input type="checkbox" class="hobby" value="gaming"> गेमिंग</label>\n<label><input type="checkbox" class="hobby" value="reading"> पढ़ना</label>\n<button id="showHobbies">चयनित दिखाएँ</button>\n\n<script>\n$('#showHobbies').on('click', function() {\n    let selected = [];\n    $('.hobby:checked').each(function() {\n        selected.push($(this).val());\n    });\n    if (selected.length) {\n        alert('आपने चुना: ' + selected.join(', '));\n    } else {\n        alert('कुछ भी चयनित नहीं।');\n    }\n});\n</script>

ध्यान दें: हम .hobby:checked का उपयोग कर रहे हैं — यह एक सेलेक्टर है जो तुरंत केवल