原生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 ...
随机推荐
- P5020 货币系统
P5020 货币系统 题解 仔细分析... 这道题其实就是求所给数组中有多少个数字不能被该数组中的数字自由组合表示出来 比如样例1 3,10 不能被该集合里的数字表示出来,所以他们组成目标集合 6=3 ...
- 关于java面试题
java的优点: Java是一种跨平台,适合于分布式计算环境的面向对象编程语言. 具体来说,它具有如下特性: 简单性.面向对象.分布式.解释型.可靠.安全.平台无关.可移植.高性能.多线程.动态性等.
- Linux命令行如何返回上一次的目录
千辛万苦进入了一个很深层的目录,一不小心输入了cd并回车 ......... 并不是再进一次,对于bash来说,只需要很管理的一个命令: cd - 该命令等同于cd $OLDPWD,关于这一点在bas ...
- MongoDB Input
Configure Connection Tab Host name(s) or IP address(es):网络名称或者地址.可以输入多个主机名或IP地址,用逗号分隔.还可以通过将主机名和端口号与 ...
- 【计算机视觉】Histogram of Oriented Gridients(HOG) 方向梯度直方图
Histogram of Oriented Gridients(HOG) 方向梯度直方图 Histogram of Oriented Gridients,缩写为HOG,是目前计算机视觉.模式识别领域很 ...
- spring_mvc入门项目的小总结
1.先搭建一个maven的web项目 ,然后把文件夹完善一下,创建一个java的文件夹和resource的问件夹,并指定他们各自的功能. 导入pom.xml文件的依赖 <properties&g ...
- PTA (Advanced Level)1035.Password
To prepare for PAT, the judge sometimes has to generate random passwords for the users. The problem ...
- Design HashMap
Design a HashMap without using any built-in hash table libraries. To be specific, your design should ...
- Hadoop集群搭建-04安装配置HDFS
Hadoop集群搭建-05安装配置YARN Hadoop集群搭建-04安装配置HDFS Hadoop集群搭建-03编译安装hadoop Hadoop集群搭建-02安装配置Zookeeper Hado ...
- shell 字符
Shell 中的符号: 在shell中有很多符号代表了一些意思,重点说说 键盘上的符号在shell中的意义. 通配符: ~ 匹配家目录 ? 匹配单个字符.( ?之匹配单一的一个字符.x11 这种的就 ...