如何使单选按钮看起来像切换按钮
时间：2023-10-21
本文介绍了如何使单选按钮看起来像切换按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我希望一组单选按钮看起来像一组切换按钮(但功能仍像单选按钮).它们没有必要看起来完全像切换按钮.
我怎样才能只使用 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 + 标签{/* 对选中的状态做一些特别的事情 *
layer.open打开的页面关闭时，父页面刷新的方法layer.open打开的页面关闭时，父页面刷新的方法，在layer.open中添加： end: function(){ window.parent.location.reload();//关闭open打开的页面时，刷新父页面 }