Sveltejs Academy · पाठ

रेडियो और चेकबॉक्स समूहों के लिए bind:group

संबंधित इनपुट के समूह को एकल वेरिएबल के साथ समकालिक करें।

पाठ 3, कुल 4 में से13 चरण

रेडियो और चेकबॉक्स समूहों के लिए bind:group, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

रेडियो समूह

परस्पर अनन्य विकल्पों के लिए एक ही bind:group चर के साथ कई रेडियो बटन का उपयोग करें।

<input type="radio" bind:group={size} value="sm" /> S
<input type="radio" bind:group={size} value="md" /> M
<input type="radio" bind:group={size} value="lg" /> L

यह कैसे काम करता है

बँधा हुआ चर चयनित रेडियो बटन के मान के बराबर होता है।

प्रारंभिक मान

चर को डिफ़ॉल्ट रूप से चयनित विकल्प के मान से प्रारंभ करें।

let size = "md";

चेकबॉक्स समूह

बहु-चयन के लिए चेकबॉक्स के समूह को किसी सरणी से बाँधें।

<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> Docs

सरणी का व्यवहार

बँधी हुई सरणी में वर्तमान में चेक किए गए सभी बॉक्सों के मान होते हैं। जोड़ना और हटाना अपने-आप होता है।

सरणी प्रारंभ करें

खाली सरणी या पहले से चयनित मानों वाली सरणी से शुरू करें।

let tags = ["bug"];

अन्य इनपुट के साथ मिलाना

मिश्रित यूआई के लिए आप एक ही फ़ॉर्म में मान और समूह को बाँध सकते हैं।

विकल्पों पर पुनरावृत्ति

डेटा से विकल्प रेंडर करने के लिए {#each} का उपयोग करें।

{#each sizes as size}
  <label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}

अक्षम विकल्प

समूह के बंधन को प्रभावित किए बिना आप अलग-अलग विकल्पों को अक्षम कर सकते हैं।

फ़ॉर्म सबमिशन

फ़ॉर्म सबमिट होने पर मान बँधे हुए चर के अनुरूप होते हैं।

मान्यकरण

कम से कम एक चयन आवश्यक करने के लिए इसे प्रतिक्रियाशील जाँचों के साथ मिलाएँ।

$: hasSelection = tags.length > 0;

त्वरित जाँच

चेकबॉक्स समूहों के लिए बँधे हुए चर का प्रकार क्या होता है?

पुनरावलोकन

रेडियो बटनों के लिए साझा चर (स्ट्रिंग) और चेकबॉक्स के लिए मानों वाली सरणी के साथ bind:group का उपयोग करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
41
पाठ
163

अक्सर पूछे जाने वाले प्रश्न

क्या “रेडियो और चेकबॉक्स समूहों के लिए bind:group” पाठ निःशुल्क है?

हाँ—“रेडियो और चेकबॉक्स समूहों के लिए bind:group” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“रेडियो और चेकबॉक्स समूहों के लिए bind:group” में मैं क्या सीखूँगा?

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

क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“रेडियो और चेकबॉक्स समूहों के लिए bind:group” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. टेक्स्ट इनपुट के लिए bind:value
  2. चेकबॉक्स के लिए bind:checked
  3. रेडियो और चेकबॉक्स समूहों के लिए bind:group
  4. DOM एलिमेंट संदर्भों के लिए bind:this
← Sveltejs Academy पर वापस जाएँ