如何使单选按钮看起来像切换按钮-前端问题

How to make a radio button look like a toggle button(如何使单选按钮看起来像切换按钮)

本文介绍了如何使单选按钮看起来像切换按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望一组单选按钮看起来像一组切换按钮(但功能仍像单选按钮).它们没有必要看起来完全像切换按钮.

我怎样才能只使用 CSS 和 HTML 来做到这一点?

当按钮被选中/取消选中时，让小圆圈消失并改变样式，我会很满意.

解决方案

根据您要支持的浏览器，您可以使用 .请注意，:checked 仅在 IE 9 中受支持，因此这种方法仅限于较新的浏览器.

但是，如果您需要支持 IE 8 并且愿意使用 JavaScript*，您可以轻松破解对 :checked 的伪支持(尽管您也可以轻松直接在标签上设置类).

使用一些快速而肮脏的 jQuery 代码作为解决方法的示例:

$('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {如果(this.checked){$('input[name="' + this.name + '"].checked').removeClass('checked');$(this).addClass('checked');//强制 IE 8 立即更新兄弟选择器//在父元素上切换一个类$('.toggle-container').addClass('xyz').removeClass('xyz');}});$('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');

然后您可以对 CSS 进行一些更改以完成操作:

input[type="radio"].toggle {/* IE 8 似乎不喜欢更新 display:none 的单选按钮 */位置:绝对；左:-99em；}输入[type="radio"].toggle:checked + label,输入[type="radio"].toggle.checked + 标签{/* 对选中的状态做一些特别的事情 *