根据要支持的浏览器，除了隐藏单选按钮之外，还可以使用:checked伪类选择器。
使用此HTML：
<input type="radio" id="toggle-on" name="toggle" checked
><label for="toggle-on">On</label
><input type="radio" id="toggle-off" name="toggle"
><label for="toggle-off">Off</label>
您可以使用类似以下CSS的内容：
input[type="radio"].toggle {
display: none;
}
input[type="radio"].toggle:checked + label {
}
例如，（保持自定义CSS简介）如果你使用引导程序，您可以添加class="btn"到您的<label>元素和风格他们适当地创建切换，看起来像：
...仅需要以下附加CSS：
input[type="radio"].toggle:checked + label {
background-image: linear-gradient(to top,#969696,#727272);
box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
0 1px 2px rgba(0, 0, 0, 0.05);
cursor: default;
color: #E6E6E6;
border-color: transparent;
text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
}
input[type="radio"].toggle + label {
width: 3em;
}
input[type="radio"].toggle:checked + label.btn:hover {
background-color: inherit;
background-position: 0 0;
transition: none;
}
input[type="radio"].toggle-left + label {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
input[type="radio"].toggle-right + label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
我已经在单选按钮切换jsFiddle演示中包括了此功能以及其他后备样式。请注意，:checked仅IE 9支持此方法，因此此方法仅限于更新的浏览器。
但是，如果您需要支持IE 8并愿意使用JavaScript *，则可以轻松获得伪支持:checked（尽管此时您可以轻松地直接在标签上设置类）。
使用一些快速且肮脏的jQuery代码作为解决方法的示例：
$('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {
if (this.checked) {
$('input[name="' + this.name + '"].checked').removeClass('checked');
$(this).addClass('checked');
$('.toggle-container').addClass('xyz').removeClass('xyz');
}
});
$('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');
然后，您可以对CSS进行一些更改以完成操作：
input[type="radio"].toggle {
position: absolute;
left: -99em;
}
input[type="radio"].toggle:checked + label,
input[type="radio"].toggle.checked + label {
}
*如果您使用的是Modernizr，则可以使用:selector测试来帮助确定是否需要后备。我在示例代码中将测试称为“ checkedselector”，随后仅在测试失败时才设置jQuery事件处理程序。
