JQuery का उपयोग करके चेकबॉक्स के लिए चेक कैसे सेट करें

JQuery का उपयोग करके चेकबॉक्स के लिए चेक कैसे सेट करें
JQuery का उपयोग करके चेकबॉक्स के लिए चेक कैसे सेट करें
Mia Chevalier
रविवार, 9 जून 2024 को 2:18:57 pm

jQuery और चेकबॉक्स के साथ कार्य करना

प्रपत्र तत्वों में हेरफेर करने के लिए jQuery का उपयोग करना वेब डेवलपर्स के लिए एक सामान्य कार्य है। ऐसा ही एक कार्य चेकबॉक्स की "चेक की गई" प्रॉपर्टी सेट करना है। इस क्रिया को कुशलतापूर्वक करने का तरीका समझने से आपकी कोडिंग प्रक्रिया सुव्यवस्थित हो सकती है और आपकी वेबसाइट की इंटरैक्टिविटी में सुधार हो सकता है।

इस लेख में, हम jQuery का उपयोग करके चेकबॉक्स की "चेक की गई" प्रॉपर्टी को सेट करने की सही विधि का पता लगाएंगे। हम उदाहरण देखेंगे, वाक्यविन्यास समझाएंगे, और आपको अपनी परियोजनाओं में लागू करने के लिए एक स्पष्ट समाधान प्रदान करेंगे।

आज्ञा विवरण
.prop() चयनित तत्वों के गुण और मान सेट या लौटाता है। यहां चेकबॉक्स की "चेक की गई" प्रॉपर्टी सेट करने के लिए उपयोग किया जाता है।
$(document).ready() यह सुनिश्चित करता है कि DOM पूरी तरह से लोड होने के बाद अंदर का कोड चलाया जाए।
express() एक एक्सप्रेस एप्लिकेशन बनाता है, जो एक्सप्रेस फ्रेमवर्क का एक उदाहरण है।
app.set() एक्सप्रेस एप्लिकेशन में किसी सेटिंग का मान सेट करता है, जैसे व्यू इंजन।
res.render() एक दृश्य प्रस्तुत करता है और क्लाइंट को प्रस्तुत HTML स्ट्रिंग भेजता है।
app.listen() निर्दिष्ट होस्ट और पोर्ट पर कनेक्शन को बांधता है और सुनता है।

jQuery चेकबॉक्स उदाहरण को समझना

प्रदान की गई स्क्रिप्ट दर्शाती है कि jQuery का उपयोग करके चेकबॉक्स की "चेक की गई" संपत्ति को कैसे सेट किया जाए। पहले उदाहरण में, HTML संरचना में एक चेकबॉक्स इनपुट शामिल है। $(document).ready() फ़ंक्शन यह सुनिश्चित करता है कि jQuery कोड DOM पूरी तरह से लोड होने के बाद ही चलता है। इस फ़ंक्शन के अंतर्गत, $(".myCheckBox").prop("checked", true); चेकबॉक्स को चेक के रूप में सेट करने के लिए कमांड का उपयोग किया जाता है। .prop() तत्वों के गुणों को सेट करने या पुनर्प्राप्त करने के लिए jQuery में विधि आवश्यक है, जो इस उद्देश्य के लिए इसे प्रभावी बनाती है।

दूसरे उदाहरण में एक्सप्रेस और ईजेएस के साथ Node.js का उपयोग करके बैकएंड स्क्रिप्टिंग शामिल है। express() फ़ंक्शन एक्सप्रेस एप्लिकेशन को प्रारंभ करता है, जबकि app.set('view engine', 'ejs') EJS को टेम्पलेट इंजन के रूप में कॉन्फ़िगर करता है। app.get() फ़ंक्शन होमपेज के लिए एक रूट सेट करता है, जिससे "इंडेक्स" दृश्य प्रस्तुत होता है res.render('index'). ईजेएस टेम्पलेट में चेकबॉक्स को चेक के रूप में सेट करने के लिए समान चेकबॉक्स इनपुट और jQuery स्क्रिप्ट शामिल है, जो दर्शाता है कि वांछित कार्यक्षमता प्राप्त करने के लिए फ्रंटएंड और बैकएंड एक साथ कैसे काम कर सकते हैं।

jQuery का उपयोग करके चेकबॉक्स को चेक के रूप में सेट करना

jQuery का उपयोग करते हुए फ्रंटएंड स्क्रिप्ट

// HTML structure
<input type="checkbox" class="myCheckBox">Check me!
// jQuery script to check the checkbox
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $(".myCheckBox").prop("checked", true);
});
</script>

चेकबॉक्स स्थिति में हेरफेर करने के लिए jQuery का उपयोग करना

एक्सप्रेस और ईजेएस के साथ Node.js में बैकएंड स्क्रिप्ट

// Install Express and EJS
// npm install express ejs
// server.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
  res.render('index');
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
// views/index.ejs
<!DOCTYPE html>
<html>
<head>
  <title>Checkbox Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="checkbox" class="myCheckBox">Check me!</input>
  <script>
    $(document).ready(function() {
      $(".myCheckBox").prop("checked", true);
    });
  </script>
</body>
</html>

jQuery के साथ एकाधिक चेकबॉक्स सेट करना

jQuery का उपयोग करके एकल चेकबॉक्स को चेक के रूप में सेट करने के अलावा, आप एक साथ कई चेकबॉक्स भी संभाल सकते हैं। का उपयोग करके $(":checkbox") चयनकर्ता, आप DOM के भीतर सभी चेकबॉक्स का चयन कर सकते हैं। यह बड़े पैमाने पर चयन या एक ही क्रिया के साथ एकाधिक चेकबॉक्स की स्थिति को टॉगल करने जैसे कार्यों के लिए उपयोगी हो सकता है। उदाहरण के लिए, का उपयोग करना $(".myCheckBox").each(function() { $(this).prop("checked", true); }) प्रत्येक चेकबॉक्स पर "myCheckBox" वर्ग के साथ पुनरावृति करेगा और उन्हें चेक के रूप में सेट करेगा।

एक अन्य उपयोगी तकनीक में उपयोगकर्ता इंटरैक्शन के आधार पर चेकबॉक्स की स्थिति को गतिशील रूप से बदलना शामिल है। जैसे इवेंट हैंडलर्स को बाइंड करके .click() या .change() चेकबॉक्स के लिए, चेकबॉक्स स्थिति बदलने पर आप कस्टम फ़ंक्शन निष्पादित कर सकते हैं। उदाहरण के लिए, $("#toggleAll").click(function() { $(".myCheckBox").prop("checked", this.checked); }) जब आईडी "toggleAll" वाले तत्व पर क्लिक किया जाएगा तो सभी चेकबॉक्स टॉगल हो जाएंगे। यह आपके वेब एप्लिकेशन को अधिक इंटरैक्टिव और उपयोगकर्ता-अनुकूल बनाता है।

jQuery के साथ चेकबॉक्स सेट करने के बारे में अक्सर पूछे जाने वाले प्रश्न

  1. मैं कैसे जांचूं कि jQuery का उपयोग करके चेकबॉक्स चेक किया गया है या नहीं?
  2. आप उपयोग कर सकते हैं $(".myCheckBox").is(":checked") यह जांचने के लिए कि चेकबॉक्स चेक किया गया है या नहीं।
  3. मैं jQuery का उपयोग करके चेकबॉक्स को कैसे अनचेक कर सकता हूं?
  4. उपयोग $(".myCheckBox").prop("checked", false) चेकबॉक्स को अनचेक करने के लिए.
  5. क्या मैं चेकबॉक्स की चेक की गई स्थिति को टॉगल कर सकता हूँ?
  6. हाँ, प्रयोग करें $(".myCheckBox").prop("checked", !$(".myCheckBox").prop("checked")) चेक की गई स्थिति को टॉगल करने के लिए।
  7. मैं jQuery के साथ फॉर्म सबमिशन में चेकबॉक्स कैसे प्रबंधित करूं?
  8. उपयोग $(".myForm").submit(function(event) { /* handle checkboxes here */ }); फॉर्म जमा करने के दौरान चेकबॉक्स प्रबंधित करने के लिए।
  9. क्या विशेषता के आधार पर चेकबॉक्स का चयन करना संभव है?
  10. हाँ, प्रयोग करें $("input[type='checkbox']") चेकबॉक्स को उनकी प्रकार विशेषता के आधार पर चुनने के लिए।
  11. मैं jQuery का उपयोग करके चेकबॉक्स को कैसे अक्षम कर सकता हूं?
  12. उपयोग $(".myCheckBox").prop("disabled", true) चेकबॉक्स को अक्षम करने के लिए.
  13. क्या मैं किसी ईवेंट को चेकबॉक्स स्थिति परिवर्तन से जोड़ सकता हूँ?
  14. हाँ, प्रयोग करें $(".myCheckBox").change(function() { /* handle change */ }) किसी ईवेंट को चेकबॉक्स स्थिति परिवर्तन से बांधने के लिए।
  15. मैं किसी विशिष्ट कंटेनर के भीतर सभी चेकबॉक्स कैसे चुनूं?
  16. उपयोग $("#container :checkbox") एक विशिष्ट कंटेनर तत्व के भीतर सभी चेकबॉक्स का चयन करने के लिए।
  17. क्या मैं चेक किए गए चेकबॉक्स की संख्या गिनने के लिए jQuery का उपयोग कर सकता हूं?
  18. हाँ, प्रयोग करें $(".myCheckBox:checked").length चेक किए गए चेकबॉक्स की संख्या गिनने के लिए।
  19. मैं किसी फ़ंक्शन को चेकबॉक्स के क्लिक इवेंट से कैसे जोड़ूं?
  20. उपयोग $(".myCheckBox").click(function() { /* function code */ }) किसी फ़ंक्शन को चेकबॉक्स के क्लिक इवेंट से बांधना।

jQuery चेकबॉक्स हैंडलिंग पर अंतिम विचार

JQuery का उपयोग करके चेकबॉक्स की स्थिति को प्रबंधित करना कुशल और सरल दोनों है। जैसे आदेशों का लाभ उठाकर .prop() और इवेंट हैंडलर, डेवलपर्स इंटरैक्टिव और उपयोगकर्ता के अनुकूल वेब एप्लिकेशन बना सकते हैं। इसके अतिरिक्त, Node.js और Express जैसी तकनीकों के साथ बैकएंड स्क्रिप्टिंग को एकीकृत करने से वेब फॉर्म की गतिशील क्षमताओं में वृद्धि होती है, जिससे वास्तविक समय की बातचीत और राज्य प्रबंधन की अनुमति मिलती है।

इन विधियों और आदेशों को समझकर, आप एक सहज और प्रतिक्रियाशील उपयोगकर्ता अनुभव सुनिश्चित करते हुए, अपनी परियोजनाओं के भीतर चेकबॉक्स को कुशलतापूर्वक संभाल सकते हैं। आधुनिक मानकों को पूरा करने वाले कार्यात्मक और गतिशील वेब एप्लिकेशन बनाने के लिए यह ज्ञान आवश्यक है।