如何将单选按钮创建为按钮？

Posted 2023-03-27

【中文标题】如何将单选按钮创建为按钮？

【英文标题】：How to create radio button as buttons?

【发布时间】：2011-07-03 12:03:39

【问题描述】：

如何创建常规单选按钮，使其与使用 css 样式的普通按钮一样？

这是我的单选按钮：

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

还有我的 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;

【问题讨论】：

我不明白。你想要样式按钮还是样式单选按钮？

您将如何准确地表示“选中”按钮？我们需要更多细节，截图也会有所帮助。

将单选按钮设为可点击按钮

为什么不直接使用...可点击的按钮。收音机能带给你什么是其他方式无法实现的？

我不明白。您当前使用的解决方案有什么问题？

【参考方案1】：

它涉及隐藏单选按钮元素并改为放入不同的元素（在运行时，以保持与不支持 JS 的浏览器的向后兼容性），然后将对新元素的更改回显到隐藏单选按钮的状态。

由于您已经在使用 jQuery，您可以考虑使用 jQuery UI，它有 exactly this functionality。