यह राइट-अप जावास्क्रिप्ट का उपयोग करके चेकबॉक्स को चेक और अनचेक करने की प्रक्रिया का वर्णन करेगा।
जावास्क्रिप्ट का उपयोग करके चेकबॉक्स को कैसे चेक/अनचेक करें?
जावास्क्रिप्ट में चेकबॉक्स को चेक या अनचेक करने के लिए, 'का उपयोग करें' जाँच ' विशेषता। सबसे पहले, HTML तत्व का संदर्भ प्राप्त करें ' चेक बॉक्स 'इसके असाइन किए गए की मदद से' पहचान ' का उपयोग ' getElementById () ” विधि, और फिर, “लागू करें” जाँच ” संपत्ति इसके मूल्य पर।
उदाहरण 1: सिंगल चेकबॉक्स को चेक/अनचेक करें
सबसे पहले, कोड की निम्न पंक्तियों के साथ एक HTML फ़ाइल बनाएँ:
< h3 > चेकबॉक्स को चेक या अनचेक करने के लिए बटन पर क्लिक करें h3 >
< निवेष का प्रकार = 'चेकबॉक्स' पहचान = 'चेकबॉक्स' > नियम और शर्त से सहमत हैं < बीआर < बीआर >
< बटन प्रकार = 'बटन' क्लिक पर = 'जांच()' > हाँ बटन >
< बटन प्रकार = 'बटन' क्लिक पर = 'अनचेक ()' > नहीं बटन >
उपरोक्त कोड में:
- आईडी के साथ एक चेकबॉक्स बनाएं ' चेक बॉक्स 'जिसका उपयोग तत्व तक पहुंचने के लिए किया जाएगा' चेक बॉक्स ” क्रिया करने के लिए।
- दो बटन बनाएँ, ' हाँ ' तथा ' नहीं ', फ़ंक्शन को ट्रिगर करने वाले चेकबॉक्स को चेक या अनचेक करने के लिए' जांच() ' तथा ' अनचेक करें () ” क्रमशः क्लिक इवेंट पर।
उपरोक्त कोड को क्रियान्वित करने के बाद, आउटपुट इस तरह होगा:
इसके बाद, जावास्क्रिप्ट फ़ाइल या टैग में चेकबॉक्स पर कार्रवाई करने के लिए कार्यों को परिभाषित करें। चेकबॉक्स को चेक करने के लिए, कोड की निम्न पंक्तियों का उपयोग करें:
समारोह जांच ( ) {
इनपुट करने दें = दस्तावेज़। getElementById ( 'चेकबॉक्स' ) ;
इनपुट। जाँच = सच ;
}
उपरोक्त कोड में:
- एक समारोह परिभाषित करें ' जांच() ” जो बटन को ट्रिगर करेगा चेकबॉक्स को चेक करने के लिए क्लिक करें।
- फ़ंक्शन के मुख्य भाग के अंदर, इसकी आईडी का उपयोग करके चेकबॉक्स का संदर्भ प्राप्त करें ' चेक बॉक्स 'की मदद से' getElementById () 'विधि और इसे एक चर में संग्रहीत करें' इनपुट ”।
- 'सेट करके चेकबॉक्स चेक करें' जाँच ' संपत्ति ' सच ”।
'क्लिक करके चेकबॉक्स को अनचेक करने के लिए' नहीं ”बटन, नीचे दिए गए कोड का उपयोग करें:
समारोह अचिह्नित ( ) {इनपुट करने दें = दस्तावेज़। getElementById ( 'चेकबॉक्स' ) ;
इनपुट। जाँच = असत्य ;
}
उपरोक्त कोड स्निपेट:
- एक समारोह परिभाषित करें ' अनचेक करें () ” जो बटन को ट्रिगर करेगा चेकबॉक्स को अनचेक करने के लिए क्लिक करें।
- फ़ंक्शन के मुख्य भाग के अंदर, इसकी आईडी का उपयोग करके चेकबॉक्स का संदर्भ प्राप्त करें ' चेक बॉक्स 'की मदद से' getElementById () 'विधि और इसे एक चर में संग्रहीत करें' इनपुट ”।
- 'सेट करके चेकबॉक्स को अनचेक करें' जाँच ' संपत्ति ' असत्य ”।
अंत में, 'का उपयोग करके पृष्ठ लोड पर डिफ़ॉल्ट रूप से चेकबॉक्स को अनचेक करने के लिए फ़ंक्शन को परिभाषित करें' विंडो.ऑनलोड ' प्रतिस्पर्धा:
खिड़की। लदाई पर = समारोह ( ) {खिड़की। addEventListener ( 'भार' , जांच , असत्य ) ;
}
उत्पादन
आउटपुट इंगित करता है कि चेकबॉक्स चेक किया गया है और बटन पर क्लिक करते समय सफलतापूर्वक अनचेक किया गया है।
उदाहरण 2: एकाधिक चेकबॉक्स को चेक/अनचेक करें
आइए एक उदाहरण देखें कि एक ही समय में सभी चेकबॉक्स को कैसे चेक या अनचेक किया जाए।
सबसे पहले, एक HTML फाइल बनाएं, और फिर आईडी के साथ कई चेकबॉक्स और एक बटन बनाएं ' टॉगल ” जो चेकबॉक्स को चेक या अनचेक करने के लिए टॉगल करेगा:
< h3 > सभी चेकबॉक्स को चेक या अनचेक करने के लिए बटन पर क्लिक करें h3 >< निवेष का प्रकार = 'चेकबॉक्स' कक्षा = 'चेकबॉक्स' > मुझे चेक या अनचेक करें < बीआर >
< निवेष का प्रकार = 'चेकबॉक्स' कक्षा = 'चेकबॉक्स' > मुझे चेक या अनचेक करें < बीआर >
< निवेष का प्रकार = 'चेकबॉक्स' कक्षा = 'चेकबॉक्स' > मुझे चेक या अनचेक करें < बीआर >
< निवेष का प्रकार = 'चेकबॉक्स' कक्षा = 'चेकबॉक्स' > मुझे चेक या अनचेक करें < बीआर >
< निवेष का प्रकार = 'चेकबॉक्स' कक्षा = 'चेकबॉक्स' > मुझे चेक या अनचेक करें < बीआर < बीआर >
< निवेष का प्रकार = 'बटन' पहचान = 'टॉगल' मूल्य = 'चेकबॉक्स को टॉगल करने के लिए क्लिक करें' >
संबंधित आउटपुट होगा:
उसके बाद, एक जावास्क्रिप्ट फ़ाइल या