自定义Input Radio兼容IE6

自定义样式的 radio 按钮在现代浏览器里挺常见的，但要兼容到 IE6，玩法就不一样了。

IE6 的不支持:checked，样式完全靠不住。这时候就得上点小技巧，搭配 JS 或者 jQuery 来手动控制选中状态，才能让样子过得去。

做法也不复杂：用包住和，把 input 藏起来，样式全交给。选中时通过 JS 改它的背景色，看着就像变了状态。

HTML 结构像这样：

<label>
  <input type="radio" name="radios" value="1">
  <span class="custom-radio"></span>
</label>

CSS 里把input[type="radio"]设成display: none，自定义的搞点圆形边框、尺寸这些。样式写好后，用 JS 监听点击事件，判断哪个 radio 被选中，再去加对应的样式。

像这样：

var radios = document.getElementsByName('radios');
for (var i = 0; i < radios.length; i++) {
  radios[i].onclick = function() {
    var siblings = document.getElementsByClassName('custom-radio');
    for (var j = 0; j < siblings.length; j++) {
      siblings[j].style.backgroundColor = '';
    }
    this.nextSibling.style.backgroundColor = '#007BFF';
  }
}

也能用 jQuery，代码更短更顺手。

虽然现在几乎没人再管 IE6 了，但如果你还在做兼容老系统的后台，或者是内网项目，这种小技巧就派得上用场。顺带一提，你可以看看自定义 radio 样式这篇，里面讲得也蛮细。