原生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 ...
随机推荐
- [Python]使用pytest进行单元测试
安装pytest pipenv install pytest 验证安装的版本: pytest --version This , imported /site-packages/pytest.py 接下 ...
- Nginx知识
OpenResty最佳实践->location匹配规则传说中图片防盗链的爱恨情仇
- Docker Registry使用记录
一.介绍 有时我们的服务器无法访问互联网,或者你不希望将自己的镜像放到公网当中,那么你就需要Docker Registry,它可以用来存储和管理自己的镜像,即私有镜像库. 二.使用 2.1 获取最新镜 ...
- tensorflow安装过程-（windows环境下）---详解
一, 前言:本次安装tensorflow是基于Python的,安装Python的过程不做说明(既然决定按,Python肯定要先了解啊):本次教程是windows下Anaconda安装Tensorflo ...
- es6 单例
class Singleton { constructor() { this.conn = this.connect(); } static getInstance() { if (!Singleto ...
- SpringMVC,SpringBoot上传文件简洁代码
@RequestMapping("/updateAvatar.html") public String updateHeadUrl(MultipartFile avatar, Mo ...
- mybatis resultMap 子元素
resultMap constructor - 类在实例化时,用来注入结果到构造方法中 idArg - ID 参数;标记结果作为 ID 可以帮助提高整体效能 arg - 注入到构造方法的一个普通结果 ...
- A New 3-bit Programming Algorithm using SLC-to-TLC Migration for 8MBs High Performance TLC NAND Flash Memory
背景 1.2012年左右的数据SLC.MLC.TLC闪存芯片的区别:SLC = Single-Level Cell ,即1bit/cell,速度快寿命长,价格超贵(约MLC 3倍以上的价格),约10万 ...
- 第七周课程总结&实验报告（五）
实验四 类的继承 实验目的 理解抽象类与接口的使用: 了解包的作用,掌握包的设计方法. 实验要求 掌握使用抽象类的方法. 掌握使用系统接口的技术和创建自定义接口的方法. 了解 Java 系统包的结构. ...
- HDU1814(Peaceful Commission) 【2-SAT DFS暴力求最小字典序的模板】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1814 题意:给出一个数n,代表有n个党派,每个党派要求派出其中一个人去参加会议,且只能派出一人.给出m ...