इसे करने बहुत सारे तरीके हैं। रेडियो बटन के चारों ओर एक कंटेनर होने की परवाह किए बिना अत्यधिक अनुशंसा की जाती है, लेकिन आप सीधे बटन पर एक वर्ग भी रख सकते हैं। इस HTML के साथ:
<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>
आप वर्ग द्वारा चयन कर सकते हैं:
$(".shapeButton").click(SetShape);
या कंटेनर आईडी द्वारा चयन करें:
$("#shapeList").click(SetShape);
किसी भी स्थिति में, ईवेंट रेडियो बटन या इसके लिए लेबल पर क्लिक करने पर ट्रिगर हो जाएगा, हालांकि बाद वाले मामले में अजीब तरह से ("#shapeList द्वारा चयन"), लेबल पर क्लिक करने से किसी कारण से दो बार क्लिक फ़ंक्शन ट्रिगर हो जाएगा, कम से कम फ़ायरफ़ॉक्स में; वर्ग द्वारा चयन करना ऐसा नहीं होगा।
SetShape एक फ़ंक्शन है, और इस तरह दिखता है:
function SetShape() {
var Shape = $('.shapeButton:checked').val();
//dostuff
}
इस तरह, आप अपने बटनों पर लेबल लगा सकते हैं, और एक ही पृष्ठ पर कई रेडियो बटन सूचियाँ रख सकते हैं जो अलग-अलग काम करते हैं। आप एक ही सूची में प्रत्येक व्यक्ति बटन को बटन के मूल्य के आधार पर सेटशैप () में अलग व्यवहार सेट करके अलग-अलग काम कर सकते हैं।