原生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：
原生html、js手写 radio与checkbox 美化的更多相关文章
- JS 如何获取radio或者checkbox选中后的值
废话不多说,直接上代码: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 常见的JS手写函数汇总（代码注释、持续更新）
最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...
- 五四青年节，今天要学习。汇总5道难度不高但可能遇到的JS手写编程题
壹 ❀ 引 时间一晃,今天已是五一假期最后一天了,没有出门,没有太多惊喜与意外.今天五四青年节,脑子里突然想起鲁迅先生以及悲欢并不相通的话,我的五一经历了什么呢,忍不住想说那大概是,父母教育孩子大声嚷 ...
- 轮播图--JS手写
轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...
- js中对radio和checkbox是否选中的判断
一.js判断checkbox 例如:<div class="checkbox" style="width: 150px;"> <label&g ...
- 浅谈时钟的生成(js手写代码)
在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...
- 不借助jquery封装好的ajax，你能用js手写ajax框架吗
不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...
- js手写图片查看器（图片的缩放、旋转、拖拽）
在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...
- js手写俄罗斯方块
代码如下 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
随机推荐
- 如何应对POST方式下载文件的接口
jQuery的下载,需要承载一个插件去做 今天遇到一个问题,后台给的接口由于需要前端传入过多的参数,只能接受用post去下载文件.正常情况下第一反应是用xhr对象去发送post请求,结果并没有触发浏览 ...
- js函数节流和防抖的理解与实现
一:函数防抖1.理解:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间2.思路:每次触发事件时都取消之前的延时调用方法 3.实现: function debounce ...
- nginx.conf 配置 （反向代理，负载均衡，fastdfs model)
#user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log notice;#error_l ...
- (转载)PIM-SM协议初探（一）路由角色选举
PIM是Protocol Independent Multicast(协议无关组播)的简称,表示可以利用静态路由或者任意单播路由协议(包括RIP.OSPF.IS-IS.BGP等)所生成的单播路由表为I ...
- C# WindowService 动态修改服务名
serviceInstaller1中可以设置服务名,描述等 在实际情况中,我们可能需要将Service多开来达到我们的目的,但是安装两次以上会有错误提示,因为服务名已经重复了,这个时候,我们需要动态改 ...
- UUID相同导致的网络连接问题
目录 场景 思路 解决过程 提升虚拟机配置 直连交换机 最终解决方案 总结 场景 有同事从公司寄了一台服务器到现场,用来安装数据库.缓存等组件供开发使用.到了之后,连接电源.网线,设置IP,用vSph ...
- 【图像处理】H.264简介
H.264/MPEG-4 AVC(H.264)是1995年自MPEG-2视频压缩标准发布以后的最新.最有前途的视频压缩标准.H.264是由ITU-T和ISO/IEC的联合开发组共同开发的最新国际视频编 ...
- Codeforces Round #581（Div. 2）
Codeforces Round #581(Div. 2) CF 1204 A. BowWow and the Timetable 题解:发现,$4$的幂次的二进制就是一个$1$后面跟偶数个$0$. ...
- [转帖]用 OpenSSL 创建可以用于 https 的证书
用 OpenSSL 创建可以用于 https 的证书 开会时 说到了安全问题 就简单鼓捣了一下 以后还是用nginx 转发比较好一些. https://blog.csdn.net/joyous/art ...
- 【转帖】Linux图形用户界面：KDE与GNOME的由来
Linux图形用户界面:KDE与GNOME的由来 置顶 2018年08月11日 15:51:25 hwpipixia 阅读数 4778 https://blog.csdn.net/u013895853 ...