纯JS打造网页中checkbox和radio的美化效果
图片素材：
效果图：
<head>
<style>
BODY {
FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5%
}
LABEL {
MARGIN-RIGHT: 1.2em
}
.custom-checkbox {
POSITION: relative
}
.custom-radio {
POSITION: relative
}
.custom-checkbox INPUT {
POSITION: absolute; MARGIN: 0px; TOP: 2px; LEFT: 2px
}
.custom-checkbox LABEL {
POSITION: relative; PADDING-BOTTOM: 0.5em; LINE-HEIGHT: 1; MARGIN: 0px 0px 0.3em; PADDING-LEFT: 30px; PADDING-RIGHT: 0px; DISPLAY: block; FONT-SIZE: 1.3em; CURSOR: pointer; PADDING-TOP: 0.5em
}
.custom-checkbox LABEL {
BACKGROUND: url(./checkbox.gif) no-repeat
}
.custom-radio LABEL {
BACKGROUND: url(./radiobutton.gif) no-repeat
}
.custom-checkbox LABEL {
BACKGROUND-POSITION: -10px -14px
}
.custom-radio LABEL {
BACKGROUND-POSITION: -10px -14px
}
.custom-checkbox LABEL.hover {
BACKGROUND-POSITION: -10px -114px
}
.custom-checkbox LABEL.focus {
BACKGROUND-POSITION: -10px -114px
}
.custom-radio LABEL.hover {
BACKGROUND-POSITION: -10px -114px
}
.custom-radio LABEL.focus {
BACKGROUND-POSITION: -10px -114px
}
.custom-checkbox LABEL.checked {
BACKGROUND-POSITION: -10px -214px
}
.custom-radio LABEL.checked {
BACKGROUND-POSITION: -10px -214px
}
.custom-checkbox LABEL.checkedHover {
BACKGROUND-POSITION: -10px -314px
}
.custom-checkbox LABEL.checkedFocus {
BACKGROUND-POSITION: -10px -314px
}
.custom-checkbox LABEL.focus {
OUTLINE-STYLE: dotted; OUTLINE-COLOR: #ccc; OUTLINE-WIDTH: 1px
}
.custom-radio LABEL.focus {
OUTLINE-STYLE: dotted; OUTLINE-COLOR: #ccc; OUTLINE-WIDTH: 1px
}
.custom-radio INPUT {
POSITION: absolute; MARGIN: 0px; TOP: 2px; LEFT: 2px
}
.custom-radio LABEL {
POSITION: relative; PADDING-BOTTOM: 0.5em; LINE-HEIGHT: 1; MARGIN: 0px 0px 0.3em; PADDING-LEFT: 30px; PADDING-RIGHT: 0px; DISPLAY: block; FONT-SIZE: 1.3em; CURSOR: pointer; PADDING-TOP: 0.5em
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="checkbox" name="genre" id="action" value="action" style="margin-left:100pt;"/>
<label for="action">答案一</label>
<input type="checkbox" name="genre" id="comedy" value="comedy" style="margin-left:100pt;" />
<label for="comedy">答案二</label>
<input type="checkbox" name="genre" id="check-3" value="epic" style="margin-left:100pt;"/>
<label for="check-3">答案三</label>
<legend>小小球童是有史以来最伟大的电影，对不对？</legend>
<br>
<input type="radio" name="opinions" id="totally" value="totally" style="margin-left:100pt;"/>
<label for="totally">完全</label>
<input type="radio" name="opinions" id="no-way" value="no-way" style="margin-left:100pt;"/>
<label for="no-way">您一定是在开玩笑</label>
<input type="radio" name="opinions" id="whats-caddyshack" value="whats-caddyshack" style="margin-left:100pt;"/>
<label for="whats-caddyshack">小小球童是什么？</label>
</form>
<script>
function addClass(b,a){RegExp("(\\s|^)"+a+"(\\s|$)").test(b.className)||(b.className+=" "+a)}
function removeClass(b,a){b.className=b.className.replace(RegExp("(\\s|^)"+a+"(\\s|$)")," ")}
var wrapOuter = function(target,target2,html){
var wrap = html
if(Object.prototype.toString.call(html) === "[object String]")
{
if(document.createRange)
{
var frag = document.createDocumentFragment();
var div = document.createElement("div");
frag.appendChild(div);
div.innerHTML = html;
wrap=frag.firstChild.firstChild;
}else { //IE8
wrap = document.createElement(html);
}
}
target.parentNode.replaceChild(wrap,target);
wrap.appendChild(target);
wrap.appendChild(target2);
}
var lblArray=[];
var inputArray=[];
var checkBoxs=document.getElementsByTagName("input");
for(var i=0;i<checkBoxs.length;i++)
{
if("INPUT"==checkBoxs[i].tagName)
{
parents=checkBoxs[i].parentNode;//form
if (parents)
{
for(var j=0;j<parents.children.length;j++)
{
if(parents.children[j]==checkBoxs[i])
{
if(parents.children[j+1])
{
var olabel=parents.children[j+1];
var oinput=parents[i];
lblArray.push(olabel);
inputArray.push(oinput);
//在olabel和oinput外面包一层<div>
wrapOuter(oinput,olabel,'<div class="custom-'+ oinput.getAttribute('type') +'"></div>');
//绑定事件
olabel.onmouseover=function(){
addClass(this,"hover");
}
olabel.onmouseout=function(){
removeClass(this,"hover");
}
olabel.onclick=function(){
for(var i=0;i<lblArray.length;i++)
{
if (this==lblArray[i])
{
if(!inputArray[i].checked)
{
inputArray[i].checked=false;
addClass(this,"checked");
if(inputArray[i].type=="radio")
{
for(var k=0;k<inputArray.length;k++)
{
if (i!=k) {
inputArray[k].checked=false;
removeClass(lblArray[k],'checked');
}
}
}
}
else
{
if(inputArray[i].type=="checkbox")
{
removeClass(this,'checked');
inputArray[i].checked=true;
}
}
break;
}
} //for i end
}
}
break;
}
}
}
}
}
</script>
</body>
</html>
以上所述是小编给大家介绍的纯JS打造网页中checkbox和radio的美化效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
用RadioButten或CheckBox实现div的显示与隐藏
当选择"女"时,显示"美女.才女":当选择"男"时,隐藏 aspx 页面内容: 复制代码 代码如下: <head runat="server"> <title>用RadioButten(或CheckBox)实现div的显示与隐藏</title> <script type="text/javascript" language="javascript"
-
JQuery触发radio或checkbox的change事件
早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码 代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框
-
android RadioButton和CheckBox组件的使用方法
RadioButton是单选按钮,多个RadioButton放在一个RadioGroup控件中,也就是说每次只能有1个RadioButton被选中.而CheckBox是多选按钮,Toatst是android中带的一个用于显示提示小窗口消息的控件,其提示的内容过一会儿会自动消失.RadioGroup和CheckBox控件设置监听器都是用的setOnCheckedChangeListener函数,其输入参数是一个函数,且函数内部要实现1个内部类.RadioGroup监听器的输入参数用的是RadioG
-
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
//如果之前有选中的,则把选中radio取消掉$("#tj_cat .pro_category").each(function(){ if ($(this).attr('checked')){ $(this).attr('checked' ,false); }});//获取被选中的标签的值radio:(checkbox和这个一样) var val=$('input:radio[name="se
-
jQuery获取Radio,CheckBox选择的Value值(示例代码)
$("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值$("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发$("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发$("#text_id").selec
-
input:checkbox多选框实现单选效果跟radio一样
最近遇到一个小小的问题,就是有时候我们使用单选radio的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时便想到了功能强大的checkbox,但他是多选,怎么才能让他变成单选,效果跟radio一样呢,本菜鸟就自己写了个小程序,代码很简单,只有四行. 废话不多说,直接代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
-
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
效果图: HTML: 复制代码 代码如下: <div id="chklist" style="padding:10px; font-size:14px; "> <input type="checkbox" value='1' /><label>aaaaaa</label> <input type="checkbox" value='2' /><label>
-
纯JS打造网页中checkbox和radio的美化效果
图片素材: 效果图: <head> <style> BODY { FONT-FAMILY: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif; FONT-SIZE:62.5% } LABEL { MARGIN-RIGHT: 1.2em } .custom-checkbox { POSITION: relative } .custom-rad
-
JS实现网页上随滚动条滚动的层效果代码
本文实例讲述了JS实现网页上随滚动条滚动的层效果代码.分享给大家供大家参考,具体如下: 这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,右侧的浮动层同样是可以关闭的稍微加工,便可实现一个浮动广告的代码,运行一下,先看效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
-
基于JS实现网页中的选项卡（两种方法）
网页中经常会用到选项卡这种东东,说白了就是点击一个选项,下面会弹出这个选项里的内容. 方法一: 方法一利用简单的代码即可实现,以下是全部的代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;}
-
才发现的超链接js导致网页中GIF动画停止的解决方法
其实这个也是曾经让俺头疼的一个问题,当时怎么都找不到原因,后来才知道这是IE6浏览器的一个bug,不过后来也没有在注意过这个问题. 今日在蓝色经典发现有网友遇到了同样的问题,而且下面的回复者似乎也都不太清楚是什么造成,感觉还是有很多朋友会遇到这种问题的.于是在此对此bug出现的原因解释下下希望对各位有用! 造成GIF停止的代码语句一般都是如下形式: 复制代码 代码如下: <a href="javascript:函数调用或js语句">超链接</a>
-
用js得到网页中所有的div的id
function handleAllTags() { var arrayOfDocFonts; if (document.all || document.getElementById) { arrayOfDocFonts = document.getElementsByTagName("div"); } alert("本文档DIV标记个数分别为: " + arrayOfDocFonts.length + "个.") var tmp=0; for(
-
纯js实现的论坛常用的运行代码的效果
用的时候把runcode.js放到网站目录,在需要运行代码的效果的地方放如下的代码 复制代码 代码如下: <div style="margin-top: 1em; margin-bottom: 1em"><div style="display:none">{1}</div><textarea rows="12" cols="95" style='font-family:"Co
-
js实现网页自动刷新可制作节日倒计时效果
复制代码 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta
-
原生js实现网页顶部自动下拉/收缩广告效果
知识要点 1.实现原理: 通过递归改变div的高度值达到缓慢下拉的效果. 2.一共分为3个步骤我写了三个函数 第一个show()函数(下拉):初始值高度h<300的话 h+5 反之return退出停止,调用setTimeout方法30毫秒执行一次+5 第二个hide()函数(收回):只是高度的判断不同高度h-5 反之return退出停止,调用setTimeout方法30毫秒执行一次-5 第三个dd()函数(再次弹出):这里要注意的是第二次弹出的div是一个新的div把它的高度设置为0,实现原理
-
javascript获取网页中指定节点的父节点、子节点的方法小结
我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多
-
纯js网页画板(Graphics)类简介及实现代码
今天需要在网页上画一个图谱,想到用JS,经过学习,和网上搜索,经过整理优化得到下面代码,注意不是用HTML5的canvas,而是用的纯js 复制代码 代码如下: /* 以下画点,画线,画圆的方法,都不是用HTML5的canvas,而是用的纯js 用到了一些数学的三角函数方法 以下代码是课堂随机写出,没有做更多优化 */ /* 面向对象封装,添加绘制矩形 进一步优化代码 */ var Graphics = function(divId, color){ this.divId = divId; th