原生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 ...
随机推荐
- 提高组刷题营 DAY 2
1.滞空(jump/1s/64M) #include<bits/stdc++.h> using namespace std; typedef long long LL; ; inline ...
- Android即时通讯开发之XMPP （一）初识XMPP协议和asmack
在讲XMPP和asmck之前 ,我还是先分享一些资源文档,如果你有耐心,可以直接忽略我下面所写的.下面有关XMPP的介绍大部分是摘抄网上的文档,后面我会写一些基于XMPP协议和asmck开源库的聊天室 ...
- vue-cli2.x版本安装vue-cli建项目
全局安装vue-cli 命令行输入: vue-cli版本在3以下 npm install --global vue-cli 安装vue-cli后,可以查看一下是否安装成功vue --version, ...
- 20190925 - 使 macOS 的 rm 命令删除到回收站的不完美办法
今天使用 macOS 时,使用 rm 删除了一个不重要文件,为保证以后不删除重要文件,找到一个让 rm 命令更安全的办法. 使用 MacPorts 安装 rmtrash 命令. sudo port i ...
- Unreal Engine* 4.19 的 CPU 功能检测
随着现代 CPU 内核数量的增加,可以拥有更多的游戏功能.但是,相比配备高端系统的玩家,内核数量较少的玩家可能会处于劣势.为了缩小这种差距,可以使用 C++ 和蓝图划分特性.这样可以实现最大的 CPU ...
- 【转载】android权限大全
1.android.permission.WRITE_USER_DICTIONARY 允许应用程序向用户词典中写入新词 2.android.permission.WRITE_SYNC_SETTINGS ...
- 【机器学习】QQ-plot深入理解与实现
QQ-plot深入理解与实现 26JUN June 26, 2013 最近在看关于CSI(Channel State Information)相关的论文,发现论文中用到了QQ-plot.Sigh!我承 ...
- 函数节流之debounce
浏览器中某些计算和处理要比其他的昂贵很多.例如, DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间.连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起,有时候甚至会崩溃.尤其在 I ...
- sql次级语句
select upper(n_id) from nrc_news;select left(n_content,1) from nrc_news;select len(n_content) from n ...
- [python] 初识 PyQt5
昨天想着用 Python 写个展示的 demo,之前打算熟悉一下 PyQt ,正好边学边做,学以致用. 主要的流程是在 cmd 下运行 .exe 并读取输出结果,运到的困难是如何实时回传数据以及修改图 ...