如何將單選按鈕創建為按鈕？

Question

如何創建常規單選按鈕以喜歡使用 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 樣式的普通按鈕？

這是我的單選按鈕：

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

還有我的 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ：

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

Answer 1

它涉及隱藏單選按鈕元素並改為放入不同的元素（在運行時，以保持與未啟用 JS 的瀏覽器的向后兼容性），然后將對新元素的更改回顯到隱藏單選按鈕的 state。

由於您已經在使用 jQuery，因此您可能會考慮 jQuery UI，它恰好具有此功能。