बटन के रूप में रेडियो बटन कैसे बनाएं? - जावास्क्रिप्ट, jquery, एचटीएमएल, सीएसएस, रेडियो

सीएसएस के साथ स्टाइल किए गए सामान्य बटन को पसंद करने के लिए नियमित रेडियो बटन कैसे बनाएं?

यहाँ मेरे रेडियो बटन हैं:

<div class="radio-toolbar">

<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Radio1</label>

<input type="radio" id="radio2" name="radios"value="false">
<label for="radio2">Radio2</label>

<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Radio3</label>
</div>

और मेरी सीएसएस:

.radio-toolbar {width:410px;}

.radio-toolbar input[type="radio"] {
display:none;
}

.radio-toolbar label {
display:inline-block;
background:#FFF;
font-family:"Arial Black", sans-serif;
font-size:12px;
color:#666666;
width:106px;
padding-left:4px;
}

.radio-toolbar [type="radio"]:checked + label {
background:url("../images/radiochecked.png") no-repeat;
color:#FFF;
}
.radio1 [type="radio"]:checked + label {
background:url("../images/radio1.png") no-repeat;
color:#FFF;
}
.radio2 input[type="radio"]:checked + label {
background:url("../images/radio2.png") no-repeat;
color:#FFF;
}



.radio-toolbar label:hover {background-color:#bbb;
background:url("../images/radiohover.png") no-repeat;
color:#FFF;
}
.radio2 label:hover {background-color:#bbb;
}

उत्तर:

इसमें रेडियो बटन तत्व को छिपाना और शामिल हैइसके बजाय एक अलग तत्व में डाल रहा है (रनटाइम के दौरान, गैर-जेएस-सक्षम ब्राउज़रों के साथ पिछड़े संगतता को बनाए रखने के लिए), फिर नए तत्व में छिपे हुए रेडियो बटन की स्थिति में परिवर्तन की गूंज।

जैसा कि आप पहले से ही jQuery का उपयोग कर रहे हैं, आप jQuery UI पर विचार कर सकते हैं, जिसमें है बिल्कुल यह कार्यक्षमता.