"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > जावास्क्रिप्ट- एकाधिक चेकबॉक्स जांचने के लिए Shift दबाए रखें!

जावास्क्रिप्ट- एकाधिक चेकबॉक्स जांचने के लिए Shift दबाए रखें!

2024-07-30 को प्रकाशित
ब्राउज़ करें:997

तो मैं वेस बोस की JavaScript30 से एक और कठिन चुनौती के बाद वापस आ गया हूँ! आज की चुनौती मेरे अनुमान से कहीं अधिक काम की थी। कई बक्सों को चेक करने के लिए शिफ्ट को दबाए रखना एक आम बात है, मुझे यह देखकर आश्चर्य हुआ कि यह स्वचालित रूप से वेबसाइटों में निर्मित नहीं होता है और आपको इसे स्वयं मैन्युअल रूप से कोड करना पड़ता है। जाहिर है अगर ऐसा होता तो यह पाठ मौजूद नहीं होता लेकिन आप जानते हैं कि मेरा क्या मतलब है।

पूरी पारदर्शिता के साथ मैंने हार मान ली और वेस के साथ इस पाठ का अनुसरण किया। वीडियो की शुरुआत भी उनके द्वारा हमें नियंत्रण लेने और स्वयं इसका पता लगाने के लिए प्रोत्साहित करने के साथ हुई। डेढ़ घंटे से अधिक गूगल करने और किसी भी प्रकार की वास्तविक प्रगति का प्रयास करने के बाद मैंने हार मान ली और इस पाठ का अनुसरण किया। मुझे इसे छोड़ने पर गर्व नहीं है, लेकिन मैं निश्चित रूप से अप्रासंगिक जानकारी के जाल में फंस रहा था और मुझे संदेह है कि मैं इस सप्ताह कभी भी कोई वास्तविक समाधान लेकर आया होता! तो हाँ...अपना सिर नीचा करके मैं वेस के पीछे-पीछे चला।

screen shot of the checklist

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

    input:checked   p {
      background: #F9F9F9;
      text-decoration: line-through;
    }

सीएसएस की यह बहुत ही सरल पंक्ति मेरे लिए अच्छी थी। मुझे पता था कि के साथ HTML के साथ एक चेकबॉक्स बनाना संभव है, लेकिन मुझे नहीं पता था कि आप केवल बॉक्स को चेक करके CSS के साथ चेकबॉक्स/डिव के गुणों को बदल सकते हैं, जिसमें चेकबॉक्स है। मैं यहां यह भी नोट करना चाहता हूं कि वेस ने यह भी उल्लेख किया है कि उन्होंने कितनी बार "चेक" शब्द कहा क्योंकि यह वीडियो में बहुत कुछ था... उचित चेतावनी यह इस पोस्ट में भी उतना ही होगा।

  let log = document.querySelector('#log');
  document.addEventListener("click", logKey)
  function logKey(e) {
    console.log(`The shift key is pressed: ${e.shiftKey}`);}

function validate() {
  if (document.getElementsByClassName('item').checked) {
    alert('checked');
  } else { alert('you didnt check it!')} }
validate()  
  let checkBoxes = document.querySelectorAll('checkbox');
  let selected = [];
  for (let i=0; i 



इस पंक्ति के ऊपर कोड ब्लॉक में सब कुछ विफल हो गया था। ये स्वयं समाधान ढूंढने के मेरे कुछ प्रयास थे। मुझे कुछ बार ऐसा महसूस हुआ जैसे मैं सही रास्ते पर था। उदाहरण के लिए, फ़ंक्शन logKey(e) वाला पहला भाग, मुझे यह जानकर बहुत गर्व हुआ कि क्लिक के दौरान शिफ्ट कुंजी दबाए जाने पर और कब नहीं दबाए जाने पर कॉल कैसे किया जाए। उसके बाद...मैं सोच भी नहीं पा रहा था कि आगे कैसे बढ़ूं। मैं फिर फंस गया।

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]')
let lastChecked

function handleCheck(e) {
  let inBetween = false
if (e.shiftKey && this.checked){
  checkboxes.forEach (checkbox => {
    console.log(checkbox)
    if (checkbox === this || checkbox === lastChecked) {
      inBetween =!inBetween;
    }
    if(inBetween) {
      checkbox.checked = true
    }
  })
}
  lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));

वेस इससे दिन बचाने के लिए यहां आया था। उन्होंने कहा कि HTML में माता-पिता/बच्चे को कॉल करके कई बक्सों की जांच करना संभव होगा, लेकिन HTML में किए गए परिवर्तनों से इसे आसानी से तोड़ा जा सकता है। इसके बजाय उसने हमें फॉर लूप या कम से कम फॉरएच का उपयोग करने के लिए कहा। इससे मुझे बहुत कुछ समझ में आया। यह एचटीएमएल के प्रत्येक भाग को जांचने का एक काफी सरल तरीका है कि रास्ते में कोई बॉक्स चेक किया गया था या नहीं। हालाँकि वह आधी लड़ाई थी।
forEach का उपयोग करने के बाद हमें यह निर्धारित करने के लिए एक नया वेरिएबल बनाना पड़ा कि चेक किए गए पहले तत्व और चेक किए गए अंतिम तत्व के बीच कौन सा तत्व है। इस प्रकार हम शेष बक्सों की जांच करेंगे और उन तत्वों को प्रतिबिंबित करने के लिए उनके गुणों को बदल देंगे जिन्हें शुरू में जांचा गया था। यहाँ इतनी सारी पंक्तियाँ थीं कि मैं थोड़ा भटक गया... फिर से || का उपयोग कर रहा हूँ और एक का उपयोग कर रहा हूँ! एक वेरिएबल से पहले की अवधारणाएँ मेरे लिए अजीब हैं। मुझे अपने अगले प्रोजेक्ट से पहले उन पर और अधिक गौर करना होगा।
इससे पहले कि मुझे पता चलता कि क्या हो रहा है, हमने पहले ही चुनौती पूरी कर ली। यह बस काम कर गया. उसी क्षण मैंने देखा कि यह चुनौती जितना मैंने सोचा था उससे कहीं अधिक सरल थी। जब सब कुछ कहा और किया जा चुका हो तो यह उतना अधिक कोड नहीं था। सभी हिस्सों को एक साथ उपयोग करने में सक्षम होना जटिल हिस्सा था। मैं स्वयं इसे हल करने में सक्षम हो सकता था, लेकिन ऐसा कहने में भी, मुझे संदेह है कि मैं इस सप्ताह के अंत तक कोई व्यवहार्य समाधान निकाल पाऊंगा।
खैर, यहीं पर यह पोस्ट समाप्त होती है! आज का पाठ मेरे लिए सबसे अच्छा नहीं था, लेकिन यह एक अच्छा अनुस्मारक था कि मुझे अभी भी बहुत लंबा सफर तय करना है। मुझे आशा है कि आप वेस बोस के जावास्क्रिप्ट 30 के अगले भाग - 11 कस्टम HTML5 वीडियो प्लेयर के साथ मेरी अगली पोस्ट देखने के लिए वापस आएंगे!

picture of the next lesson!

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/virtualsbriety/javascript30-10-होल्ड-शिफ्ट-टू-चेक-मल्टीपल-चेकबॉक्स-4ln5?1 यदि कोई उल्लंघन है, तो कृपया हटाने के लिए स्टडी_गोलंग@163.com पर संपर्क करें। यह
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3