原生html、js手写 radio与checkbox 美化

原生html、js手写 radio与checkbox   美化

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
    <style>
        ul{width:100%;text-align: center;}
        li{
            display: inline-block;
            vertical-align: middle;
            width:30%;
            position: relative;
            border:1px solid #ccc;
        }
        li:div:first-child{
            height:300px;
        }
        button{
            margin:10px;
            width:100px;
        }
        label.sim-check{
            display: inline-block;
            vertical-align: middle;
            margin:2px 4px;
        }
        label.sim-check input{
            width:0;height:0;
            opacity: 0;
            margin:0;padding:0;
            border:0;outline: none;
        }
        label.sim-check em{
            display: inline-block;
            vertical-align: middle;
            width:13px;
            height:13px;
            background: url(check.png) no-repeat;
        }
        label.sim-check em.c{
            background-position: 0 -14px;
        }
        label.sim-check em.r{
            background-position: -28px -14px;
        }
        label.sim-check span{
            margin-left:6px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div id="radio"></div>
        </li>
        <li style="margin:0 12px;">
            <div id="check"></div>
        </li>
    </ul>
    <div id="test" style="height:200px;"></div>
    <script>
        /**
         * obj:初始化参数
         * type:checkbox|radio
         * data:初始数据
         * id:表单容器
         * */
         function initCheck(obj){
            var el=document.getElementById(obj.id);//容器对象
            var createHtml=function(type,data){
                var t=type=="radio";
                var _str='<label class="sim-check">'
                   +'<input type="'+type+'" name="sim-input" value="'+data+'">'
                    +'<em class="'+(t?"r":"c")+'" style="background-position-x: '+(t?-28:0)+'px;background-position-y: -14px;"></em>'
                    +'<span>'+data+'</span>'
                +'</label>';
                return _str;
            }
            for(var i=0,str=[];i<obj.data.length;i++){
                str.push(createHtml(obj.type,obj.data[i]));
            }
            el.innerHTML=str.join('');
            var check_obj={
                el:el,
                type:obj.type,
                el_html:str,
                value:function(){
                    var input=this.el.getElementsByTagName('input');
                    for(var i=0,res=[];i<input.length;i++){
                        if(input[i].checked){
                            res.push(input[i].value)
                        }
                    }
                    return res;
                },
                add:function(index,data){
                    //appendChild()
                    var html=this.el.innerHTML;
                    var _arr=html.split('</label>');
                    var new_html=createHtml(this.type,data)
                    new_html=new_html.replace('</label>','');
                    _arr.splice(index,0,new_html);
                    this.el.innerHTML=_arr.join('</label>');
                },
                del:function(index){
                    //removeChild()
                    var label=this.el.getElementsByTagName('label');
                    this.el.removeChild(label[index]);
                },
                dis:function(index){
                    var label=this.el.getElementsByTagName('label');
                    var em=label[index].getElementsByTagName('em');
                    var class_name=label[index].className;
                    if(class_name.indexOf('dis')==-1){
                        label[index].className=class_name+' dis';
                        em[0].style.backgroundPositionY='0px';
                    }else{
                        label[index].className=class_name.replace('dis','');
                        em[0].style.backgroundPositionY='-14px';
                    }
                }
            }//保存操作对象用于返回
            el.addEventListener('change',function(e){
                var _el=e.target;
                var _el_p=_el.parentNode;
                if(_el_p.className.indexOf('dis')!==-1){return false;}
                var _el_em=_el_p.getElementsByTagName('em');
                if(_el_em[0].className.indexOf('c')>=0){
                    var x=parseFloat(_el_em[0].style.backgroundPositionX);
                    if(_el.checked){
                        _el_em[0].style.backgroundPositionX=(x-14)+"px"
                    }else{
                        _el_em[0].style.backgroundPositionX=(x+14)+"px"
                    }
                }else{
                    var _el_aem=_el_p.parentNode.getElementsByTagName('em');
                    var _el_ps=_el_p.parentNode.getElementsByTagName('label');
                    for(var i=0;i<_el_ps.length;i++){
                        if(_el_ps[i].className.indexOf('dis')<0){
                            if(_el_aem[i]==_el_em[0]){
                                _el_aem[i].style.backgroundPositionX="-42px"
                            }else{
                                _el_aem[i].style.backgroundPositionX="-28px"
                            }
                        }
                    }
                }
            });
            return check_obj;
         }
</script>
<script>
    var radio=initCheck({
        type:'radio',
        id:'radio',
        data:['男','女','其他','保密']
    });
    console.log(radio)
</script>
<script>
    var check=initCheck({
        type:'checkbox',
        id:'check',
        data:['运动','听音乐','游戏','旅游','看书']
    });
</script>
</body>
</html>

图片资源/check.png：