[分享]js+css美化radio和checkbox

先看radio/checkbox效果对比:

下边贴出源码，实现的原理很简单，就是，先隐藏input[type=radio/checkbox]，然后2中状态图片的切换，同时触发值得改变。

HTML代码如下：

   Radio1
 

   Radio2
 

    Radio3
 

    checkbox1
 

    checkbox2
 

CSS代码如下：

label {
  display: block;
  cursor: pointer;
  line-height: 20px;
  padding-bottom: 9px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
.label_check input,
.label_radio input {
  margin-right: 5px;
}

.has-js .label_check,
.has-js .label_radio {
  padding-left: 34px;
}

.has-js .label_radio,
.has-js .label_check{
  background: url(upload/2013/7/201307111320336660.png) no-repeat;
}
.has-js .label_radio {
  background-position: 0 0;
}
.has-js .label_check {
  background-position: 0 -100px
}
.has-js label.c_on {
  background-position: 0 -150px;
}
.has-js label.r_on {
  background-position: 0 -50px;
}
.has-js .label_check input,
.has-js .label_radio input {
  position: absolute;
  left: -9999px;
}

JS代码如下：

var d = document;
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
 
var gebtn = function (parEl, child) { return parEl.getElementsByTagName(child); };
onload = function () {
    var body = gebtn(d, 'body')[0];
    body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
    if (!d.getElementById || !d.createTextNode) {
        return;
    }
    var ls = gebtn(d, 'label');
    for (var i = 0; i < ls.length; i++) {
        var l = ls[i];
        if (l.className.indexOf('label_') == -1) {
            continue;
        }
        //debugger;
        var inp = gebtn(l, 'input')[0];
        if (l.className == 'label_check') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
            //l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_off' : 'label_check c_on';
            l.onclick = check_it;
            inp.onclick = function (e) { //阻止冒泡,避免label点击事件多触发一次
                e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble = true;
            }
        };
        if (l.className == 'label_radio') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
            l.onclick = turn_radio;
        };
    };
};
var check_it = function (e) {
    var inp = gebtn(this, 'input')[0];
    console.log(this.className);
    if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
        this.className = 'label_check c_on';
        if (safari) {
            //inp.click();
            inp.checked = false;
            //console.log(document.getElementById('mytest').checked);
        };
    } else {
        this.className = 'label_check c_off';
        if (safari) {
            //inp.click();
            inp.checked = true; //也会触发事件冒泡
            //inp.setAttribute('checked', false);//不会事件冒泡，但是设置为true时无效。
            //console.log(inp);
            //console.log(this);
        };
    };
};
var turn_radio = function () {
    var inp = gebtn(this, 'input')[0];
    if (this.className == 'label_radio r_off' || inp.checked) {
        var ls = gebtn(this.parentNode, 'label');
        for (var i = 0; i < ls.length; i++) {
            var l = ls[i];
            if (l.className.indexOf('label_radio') == -1) {
                continue;
            };
            l.className = 'label_radio r_off';
        };
        this.className = 'label_radio r_on';
        if (safari) {
            inp.click();
        };
    } else {
        this.className = 'label_radio r_off';
        if (safari) {
            inp.click();
        };
    };
}; 

文章转自：http://www.w3cplus.com/css/fancy-checkboxes-and-radio-buttons （修复了checkbox的冒泡的错误）

备份图片：

下边2张图片，可以合成一张，效果也很好看的。哈哈