原生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：
