原生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 ...
随机推荐
- webstrom配置node语法提示
一.mac下打开设置 二.输入node,找到node.js npm,勾选上对勾就好了. 第三.按住ctr,点击右键可以点进去就可以了.
- python之crawlscrapy爬取某集团招聘信息以及招聘详情
针对这种招聘信息,使用crawlscrapy很适合. 1.settings.py # -*- coding: utf-8 -*- # Scrapy settings for gosuncn proje ...
- 【转载】网页JS获取当前地理位置（省市区）
眼看2014又要过去了,翻翻今年的文章好像没有写几篇,忙真的或许已经不能成为借口了,在忙时间还是有的,就像海绵里的水挤挤总会有滴.真真的原因是没有学习过什么新的技术,工作过程中遇到的问题也不是非常难并 ...
- java ldap用户密码md5加密
在这里不过多介绍ldap,因为这样的文章特别多,这里就简单直接的记录这一个问题. 在springboot中通过引入spring-boot-starter-data-ldap,使用LdapTemplat ...
- Google Protocol Buffer 用法 C#
在网上查了一下,虽然有很多文章介绍Protocol Buffer,但是实际使用起来,还是会遇到很多问题,所以我想应该有一个指南一样的东西,让新手很快就能使用它. Protocol Buffer简写为P ...
- Java内部类(5)：应用例
例1-闭包(Closure) 闭包是一个可调用的对象(通过Callback),它记录了一些信息,这些信息来自于创建它的作用域 interface Incrementable { void increm ...
- ERROR 2002 (HY000): Can 't connect to local MySQL server through socket '/tmp/mysql.sock '(2) "
找不到mysql.sock这个文件 如果在你操作安装提示创建该文件,重启服务器还是提示这个错误可以试一下 mysql -uroot -h 127.0.0.1 -p 应该是可以直接进入 具体处理方法 重 ...
- keepalived脑裂问题
一.对脑裂的理解 在高可用(HA)系统中,当联系2个节点的“心跳线”断开时,本来为一整体.动作协调的HA系统,就分裂成为2个独立的个体.由于相互失去了联系,都以为是对方出了故障.两个节点上的HA软件像 ...
- 多版本YUM仓库搭建
服务器:CentOS7 YUM源:阿里云 空间要求:CentOS6+CentOS7 50G,考虑后期更新预留,LVS空间100G 1.在服务器配置CentOS7的yum源和CentOS6的yum源 ...
- list-style-type:none是加在ul还是li中呢？
很多时候我们都需要多对列表元素进行初始化,方法是给列表元素添加list-style-type: none,但作为小白的我是经常纠结一个问题:是把它加在ul中还是li中呢 我试了一下,加在ul和li都能 ...