Ako vytvoriť prepínač ako tlačidlá? javascript, jquery, html, css, rádio

Ako vytvoriť bežné prepínacie tlačidlá, aby sa páčili normálnym tlačidlám štylovaným s CSS?

Tu sú moje prepínače:

<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>

A môj css:

.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;
}

odpovede:

Zahŕňa to skrytie prvku prepínača anamiesto toho vložiť iný prvok (za behu, aby sa zachovala spätná kompatibilita s prehliadačmi, ktoré nepodporujú JS), a potom sa ozveny zmeny nového prvku do stavu skrytého prepínača.

Keď už používate jQuery, mali by ste zvážiť používateľské rozhranie jQuery, ktoré má presne táto funkcia.