HTML रेडियो बटन को उसके लेबल पर क्लिक करके टॉगल करें

87

क्या रेडियो बटन को टॉगल करने का एक सरल तरीका है - जब इसके पास एक पाठ पर क्लिक किया जाता है - मेरी स्माल PHP परियोजना में किसी भी बड़े जावास्क्रिप्ट फ्रेमवर्क को शुरू किए बिना?

वेब फ़ॉर्म इस तरह दिखता है:

<html>
<body>
<form method="post">
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>

javascript html radio-button

— अलेक्जेंडर Farber
स्रोत

164

आप अपने तत्वों को प्रत्येक आईडी के बिना भी लपेट सकते हैं , क्योंकि <label>इसमें इनपुट के लिए निहित है, जैसे कि:

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>

— निक क्रेवर
स्रोत

4

यह लेबल को अधिक कठिन बनाता है और आपको अपने पाठ को और भी अधिक तत्वों में लपेटने की आवश्यकता होती है।

— सोवियुत

2

हां, लेकिन अगर आप स्टाइल नहीं कर रहे हैं, तो यह आपके लिए आवश्यक कार्यक्षमता प्राप्त करना आसान बनाता है। मुझे अतिरिक्त आईडी और "के लिए" विशेषताएँ जोड़ना पसंद नहीं है।

— डॉ। सी। हिलेरी

4

एक सामान्य नियम के रूप में उनसे बचने के लिए +1 आईडी बहुत बुरी हो सकती है

— क्रिस स्टीफंस

रैपिंग का उपयोग करने के लिए idऔर forकोई रैपिंग के साथ एक बेहतर समाधान है । कारण यह है कि यदि लेबल में व्यापक मार्जिन है और उपयोगकर्ता चेकबॉक्स और लेबल के बीच मीठे स्थान पर क्लिक करने के लिए होता है (जैसा कि वे सबसे अधिक संभावना है) तो कुछ भी नहीं होता है। यहाँ फिडेल

— मार्कस जुनियस ब्रूटस

72

आप <label>तत्वों का उपयोग कर सकते हैं , जो वास्तव में ऐसा करने के लिए डिज़ाइन किए गए हैं:

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>

— Frédéric Hamidi
स्रोत

1

@ अलेक्सेंडर, बिल्कुल। केवल सफारी संस्करण 2 और निम्न इसका समर्थन नहीं करता है।

— Frédéric Hamidi

3

और इसके बाद आप चयनकर्ताओं input#radCreateMode:checked ~ labelको लेबल पर शैलियों को लागू करने के लिए उपयोग कर सकते हैं । चयन पर लेबल के लिए शैलियों को लागू करना संभव नहीं है अगर हम लेबल के अंदर इनपुट घोंसला बनाते हैं।

— ज़ुहैब अली

1

यह वास्तव में स्वीकृत उत्तर होना चाहिए, यह ऐसा करने का उचित तरीका है।

— greco.roamin

1

मैं Safari v 13 का उपयोग कर रहा हूं और यह विधि मेरे लिए काम नहीं करती है। रेडियो बटन का चयन रद्द किया जा सकता है, लेकिन चयनित नहीं। मुझे इनपुट के चारों ओर लेबल लपेटना था: <लेबल> <इनपुट> मेरा लेबल पाठ </ लेबल>। ध्यान दें कि मैं एक <form> का उपयोग नहीं कर रहा हूं, न ही एक <फ़ील्ड> का।

— IAM_AL_X

सुनिश्चित करें कि विशेषता मान इनपुट के लिए सही आईडी है। बस अगर किसी ने मेरे जैसी ही गलती की है।

— केविन .NET

5

लेबल के तहत इनपुट लपेटकर काम करना चाहिए।

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>

— जेसन चिंग
स्रोत

1

मुझे इस पद्धति का उपयोग करके रेडियो बटन के मूल्य को खोजने में परेशानी हुई, एक विकल्प एक बटन के हिट करने योग्य क्षेत्र में वृद्धि करने वाले हिट क्षेत्र का उपयोग करना है ।

— क्रिस्टोफर ग्रिग
स्रोत