表单美化-原生javascript和jQuery多选按钮（兼容IE6）

前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化。我们的想法是：利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式，就是说用什么的样式是由按钮的状态来决定。

用到的图片

效果

代码我就不具体一步一步做了有兴趣的童鞋可以参见下我第一篇美化表单的文章http://blog.csdn.net/qianqianyixiao1/article/details/40422769

首先我们用原生的javascript来做这个效果

需要注意的是IE8以下是不支持getElementsByClassName这个方法的，所以这个代码就兼容的是IE9+；等下我们就来改下代码是它满足IE8以前的浏览器，也许你们会问既然不支持getElementsByClassName那换成getElementsByTagName啊!不也同样可以获取所有的label吗？是的换成getElementsByTagName在这里效果也是可以的，不信大家可以把下面的代码复制直接把getElementsByClassName的地方改为getElementsByTagName("label")然后修改下相应的代码（我们在下面给出代码）效果也是一致的就可以兼容IE的老版本了，但是我为什么要纠结于用类呢？聪明的童鞋大概都已经想到了，这样做主要是为了代码能够更好的重用大家都知道一个表单里面的label元素里面的不可能全部都是多选按钮对吧
也有可能是单选按钮，所以我们这里就给多选按钮全部添加一个类然后做统一的处理这样就不会影响其他同样是label但是下面不是多选按钮的元素了，除了这种方法，要区别其他元素还有很多方法，例如给单选按钮的外层增加一个父容器也是可以的，只是这样会增加许多无用的标签，具体用什么的方法大家自己看具体的项目分析。

<span style="font-size:18px;"><!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.checkboxList input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;}

.checkboxList .icon{display: inline-block;width: 20px;height: 20px;background: url(checkbox.png) -90px 0 no-repeat;position: absolute;left: 0;top: 0;}

.checkboxList{position: relative;}

.checkbox_checked .icon{background-position: -60px -30px;}

.checkbox_disabled .icon{background-position: 0 -90px;}

</style>

<script type="text/javascript">

function showcheckbox(){

    var checkbox_parent="checkboxList";  /*声明几个变量*/

var checked_checkbox_css="checkbox_checked";

var disabled_checkbox_css="checkbox_disabled";

       var lable=document.getElementsByClassName(checkbox_parent);/*获取所有类名为checkboxList ，注意了 getElementsByClassName()获取的是一个数组，IE8以下是不支持getElementsByTagName这个方法的*/

for(var i=0;i<lable.length;i++){  /*遍历所有的lable*/

lable[i].setAttribute("class",checkbox_parent); /*首先每执行该函数的时候都把lable的类还原为只有checkboxList*/

var input=lable[i].getElementsByTagName("input")[0]; /*然后获取当前lable里面的input*/

var oldClass=input.parentNode.getAttribute("class"); /*然后获取当前lable的类*/

var newClass=oldClass+" "+checked_checkbox_css;  /*创建一个变量存放checkboxList和checkbox_checked*/

var newClass2=oldClass+" "+disabled_checkbox_css; /*创建一个变量存放checkboxList和checkbox_disabled*/

if(input.checked){  /*然后判断input是否给选中*/

input.parentNode.className=newClass;  /*是的话就给它的父节点的类为newClass*/

}else if(input.disabled){ /*然后判断input是否不给选中*/

                input.parentNode.className=newClass2; /*是的话就给它的父节点的类为newClass2*/

}else{

                input.parentNode.className=oldClass; /*都不满足的话给它的父节点的类为noldClass*/

}

}

}

window.onload=function(){   /*页面载入完毕执行一个匿名函数*/

var lable=document.getElementsByClassName("checkboxList");  /*首先获取页面所有类为checkboxList的lable元素，注意getElementsByClassName()获取的是一个数组*/

for(var i=0;i<lable.length;i++){ /*然后我们遍历所有筛选出来的lable元素*/

        lable[i].onclick=function(){ /* 为它们每个都绑定一个点击事件*/

        showcheckbox();  /*当它们中的任何一个触发即被点击的时候都执行函数showcheckbox*/

        }

}

showcheckbox(); /*就算没有点击lable元素，页面在每次载入的时候都执行一次函数showcheckbox*/

}

</script>

</head>

<body>

<form action="#">

<label class="checkboxList" for="checkbox1">

<span class="icon"></span>

        <input type="checkbox" id="checkbox1" checked="checked">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox2">

<span class="icon"></span>

        <input type="checkbox" id="checkbox2">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox3">

<span class="icon"></span>

        <input type="checkbox" id="checkbox3">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox4">

<span class="icon"></span>

        <input type="checkbox" id="checkbox4">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox5">

<span class="icon"></span>

        <input type="checkbox" id="checkbox5" disabled="disabled">

        Unchecked

     </label>

</form>

</body>

</html></span>

换成getElementsByTagName后的代码如下，现在的代码是兼容IE5+，因为我的机子最低的就是IE5，大家有的可以用其他来测试下，当然了现在我们只需兼容到IE7就好了，也许有的还要兼容ie6,具体的看自己的需求吧。

<span style="font-size:18px;"><!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.checkboxList input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;}

.checkboxList .icon{display: inline-block;width: 20px;height: 20px;background: url(checkbox.png) -90px 0 no-repeat;position: absolute;left: 0;top: 0;}

.checkboxList{position: relative;}

.checkbox_checked .icon{background-position: -60px -30px;}

.checkbox_disabled .icon{background-position: 0 -90px;}

</style>

<script type="text/javascript">

function showcheckbox(){

    var checkbox_parent="checkboxList";

var checked_checkbox_css="checkbox_checked";

var disabled_checkbox_css="checkbox_disabled";

       var lable=document.getElementsByTagName("label");/*这里是修改的地方*/

for(var i=0;i<lable.length;i++){

lable[i].setAttribute("class",checkbox_parent);

var input=lable[i].getElementsByTagName("input")[0];

var oldClass=input.parentNode.getAttribute("class");

var newClass=oldClass+" "+checked_checkbox_css;

var newClass2=oldClass+" "+disabled_checkbox_css;

if(input.checked){

input.parentNode.className=newClass;

}else if(input.disabled){

                input.parentNode.className=newClass2;

}

else{

                input.parentNode.className=oldClass;

}

}

}

window.onload=function(){

var lable=document.getElementsByTagName("label"); /*这里是修改的地方*/

for(var i=0;i<lable.length;i++){

        lable[i].onclick=function(){

        showcheckbox();

        }

}

showcheckbox();

}

</script>

</head>

<body>

 <!-- 兼容所有主流浏览器和ie5+  -->

<form action="#">

<label class="checkboxList" for="checkbox1">

<span class="icon"></span>

        <input type="checkbox" id="checkbox1" checked="checked">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox2">

<span class="icon"></span>

        <input type="checkbox" id="checkbox2">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox3">

<span class="icon"></span>

        <input type="checkbox" id="checkbox3">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox4">

<span class="icon"></span>

        <input type="checkbox" id="checkbox4">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox5">

<span class="icon"></span>

        <input type="checkbox" id="checkbox5" disabled="disabled">

        Unchecked

     </label>

</form>

</body>

</html></span>

javascript最终版

<span style="font-size:18px;"><!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.checkboxList input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;}

.checkboxList .icon{display: inline-block;width: 20px;height: 20px;background: url(checkbox.png) -90px 0 no-repeat;position: absolute;left: 0;top: 0;}

.checkboxList{position: relative;}

.checkbox_checked .icon{background-position: -60px -30px;}

.checkbox_disabled .icon{background-position: 0 -90px;}

</style>

<script type="text/javascript">

function getClassName(classname,idbox){  /* 获取含有某个类的函数*/

var box=document.getElementById(idbox);

var cbox=box || document;

var cbox_elem=cbox.getElementsByTagName('*');

var ctag=new Array();

for(var i=0;i<cbox_elem.length;i++){

var cur_else=cbox_elem[i];

var classnames=cur_else.className.split(' ');

for(var j=0;j<classnames.length;j++){ 

if(classnames[j]==classname){

ctag.push(cur_else);

break;

}

}

}

return  ctag;

}

function showcheckbox(){

    var checkbox_parent="checkboxList";

var checked_checkbox_css="checkbox_checked";

var disabled_checkbox_css="checkbox_disabled";

        var lable=getClassName(checkbox_parent);/*这里是修改的地方*/

for(var i=0;i<lable.length;i++){

lable[i].setAttribute("class",checkbox_parent);

var input=lable[i].getElementsByTagName("input")[0];

var oldClass=input.parentNode.getAttribute("class");

var newClass=oldClass+" "+checked_checkbox_css;

var newClass2=oldClass+" "+disabled_checkbox_css;

if(input.checked){

input.parentNode.className=newClass;

}else if(input.disabled){

                input.parentNode.className=newClass2;

}

else{

                input.parentNode.className=oldClass;

}

}

}

window.onload=function(){

var lable=document.getElementsByTagName("label"); /*这里是修改的地方*/

for(var i=0;i<lable.length;i++){

        lable[i].onclick=function(){

        showcheckbox();

        }

}

showcheckbox();

}

</script>

</head>

<body>

 <!-- 兼容所有主流浏览器和ie5+  -->

<form action="#" >

<label class="checkboxList" for="checkbox1">

<span class="icon"></span>

        <input type="checkbox" id="checkbox1" checked="checked">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox2">

<span class="icon"></span>

        <input type="checkbox" id="checkbox2">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox3">

<span class="icon"></span>

        <input type="checkbox" id="checkbox3">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox4">

<span class="icon"></span>

        <input type="checkbox" id="checkbox4">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox5">

<span class="icon"></span>

        <input type="checkbox" id="checkbox5" disabled="disabled">

        Unchecked

     </label>

</form>

</body>

</html>

</span>

然后我们用jQuery：惯例我们测试的是IE5+用

<span style="font-size:18px;"><!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.checkboxList input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;}

.checkboxList .icon{display: inline-block;width: 20px;height: 20px;background: url(checkbox.png) -90px 0 no-repeat;position: absolute;left: 0;top: 0;}

.checkboxList{position: relative;}

.checkbox_checked .icon{background-position: -60px -30px;}

.checkbox_disabled .icon{background-position: 0 -90px;}

</style>

<script  src="jquery-1.11.1.min.js"></script>

<script type="text/javascript">

var checkbox_parent=".checkboxList";

var checkbox_input=checkbox_parent+" input[type='checkbox']";

var checked_checkbox_css="checkbox_checked";

var disabled_checkbox_css="checkbox_disabled";

function  showCheckbox(){

if($(checkbox_parent).length){ /*每次执行showCheckbox()都判断是否有.checkboxList不为0则有.checkboxList就执行里面的代码*/

$(checkbox_parent).each(function() {  /*第一步先把每个.checkboxList里的.checkbox_checked都清除*/

$(this).removeClass(checked_checkbox_css);

});

$(checkbox_input+":checked").each( function() { /*第二步先把每个.checkboxList里选中的按钮都筛选出来然后给它的父元素添加.checkbox_checked*/

$(this).parent(checkbox_parent).addClass(checked_checkbox_css);

});

$(checkbox_input+":disabled").each( function() { /*第三步先把每个.checkboxList里不能选中的按钮都筛选出来然后给它的父元素添加.checkbox_disabled*/

$(this).parent(checkbox_parent).addClass(disabled_checkbox_css);

});

}

}

$(function(){

$(checkbox_parent).click(function() {    /*当任何一个.checkboxList被点击的时候都执行一次showCheckbox()*/

showCheckbox();

});

showCheckbox();  /* 页面每次载入的时候都执行一次showCheckbox()*/

})

</script>

</head>

<body>

<form action="#">

<label class="checkboxList" for="checkbox1">

<span class="icon"></span>

        <input type="checkbox" id="checkbox1" checked="checked">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox2">

<span class="icon"></span>

        <input type="checkbox" id="checkbox2">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox3">

<span class="icon"></span>

        <input type="checkbox" id="checkbox3">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox4">

<span class="icon"></span>

        <input type="checkbox" id="checkbox4">

        Unchecked

     </label>

     <label class="checkboxList" for="checkbox5">

<span class="icon"></span>

        <input type="checkbox" id="checkbox5" disabled="disabled">

        Unchecked

     </label>

</form>

</body>

</html></span>

知识点：

1：变量：

javascript是一种弱语言，不同于JAVA这般强语言，声明变量的时候要一定要指明数据类型然后赋值的时候也一定要按照声明时的数据类型来赋值。javascript不需要声明事先声明将要存储的数据类型，赋值的时候开始是字符类型后来是数值类型也是可以的。

javascript中要用var 来为变量在内存里预留空间。变量主要存储在机子的内存中，这样就明显的提高了执行的效率。在关闭页面或者重新加载页面的时候或者重新赋值时，javascript中垃圾回收机制会把原来变量撤销，把内存空出来。

2：for 重复执行同一代码块（当需要重复的次数已知的时候用for比较合适）

for (语句 1; 语句 2; 语句 3)

  {

  被执行的代码块

  }

语句1：声明一个变量用来跟踪代码执行的次数；

语句2：代码块执行的条件；

语句3：每次执行代码块后改变变量（递增或者递减）

javascript第一次遇到for语句时，初始化变量，这个行为只执行一次。然后判断条件是否为TRUE，条件为TRUE则执行代码块里面的内容，执行完代码块里的内容后递增或递减变量，变量改变后再来判断条件是否为TRUE，为TRUE则执行代码块内容，然后再改变变量再判断再执行，一直重复直到条件为FALSE退出for执行for语句后面的代码。

3：if语句：

if (条件)

  {

  当条件为 true 时执行的代码

  }

else

  {

  当条件不为 true 时执行的代码

  }

javascript中的语句都是从上到下依次执行的，但有时候我们想改变这样的执行顺序。那么我们就可以用if语句，当条件为TRUE的时候就执行紧接着的代码块然后退出if语句执行if语句后的代码，如果条件不为TRUE那么就执行else语句里的代码块然后退出if语句执行if语句后的代码。

代码下载

fo gfdsgfd=

表单美化-原生javascript和jQuery多选按钮（兼容IE6）的更多相关文章

表单美化-原生javascript和jQuery单选按钮（兼容IE6）
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
表单美化-原生javascript和jQuery下拉列表（兼容IE6）
效果: 思想:用其他标签配合脚本和隐藏的input并通过传值模拟表单元素中的select <!DOCTYPE HTML> <html lang="en-US"&g ...
JavaScript/jQuery 表单美化插件小结
Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...
推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
jQuery星级评论表单美化代码
最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...
jQuery和CSS3超酷表单美化插件
这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...
HTML5——表单美化
闲聊: 今天小颖在跟着慕课网学习:表单美化看完了自己跟着敲了敲,顺便做个笔记嘻嘻,好记性不如烂笔头,脑子记不住,就写成笔记,以后也方便查看,嘻嘻. 正文: 1.表单美化_单选按钮篇 2.表单美化_复 ...
BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等）全选反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
iCheck表单美化插件使用方法详解（含参数、事件等）
iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...

随机推荐

在使用Myeclipse时，用Tomcat添加部署项目的时候报错，或启动tomcat报错
the selected server is enabled,but is not configured properly.deployment to it will not be permitted ...
php如何支持实现多线程并发
<?php if(function_exists('date_default_timezone_set')) { date_default_timezone_set('PRC'); } func ...
HDU 2236：无题II（二分搜索+二分匹配）
http://acm.hdu.edu.cn/showproblem.php?pid=2236 题意:中文题意. 思路:先找出最大和最小值,然后二分差值,对于每一个差值从下界开始枚举判断能不能二分匹配. ...
ECshop中defined('IN_ECS')的实现原理
在PHP中经常看到如下代码 if (!defined('IN_ECS')) { die('Hacking attempt'); } 实现的原因以及原理如下: ecs ...
《图解TCP/IP》
MAC寻址:地址转发表:IP寻址:路由控制表. 网卡(网络接口卡),NIC. 循环复用DNS技术. 代理服务器是一种应用网关.防火墙. LLC是Logical Link Control的缩写,意为:逻 ...
JavaScript push()和splice（）方法
JavaScript push() 方法定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 语法 arrayObject.push(newelement1,newele ...
django 自定义标签和过滤器
django 自定义标签和过滤器 Django支持自定义标签和过滤器.起初还不太重视它这项功能,但最近试了试自定义标签.发现django这个功能实在是太爽了. 首先在你项目的一个app中建立一个pyt ...
asp.net c# 打开新页面或页面跳转
1.最常用的页面跳转(原窗口被替代):Response.Redirect("XXX.aspx"); 2.利用url地址打开本地网页或互联网:Respose.Write(" ...
Maximum Value(哈希)
B. Maximum Value time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
httpclient4.3.6/httpcore-4.4自己封装的工具类
引入jar包 httpclient4.3.6/httpcore-4.4 package com.develop.util; import java.io.IOException; import jav ...

表单美化-原生javascript和jQuery多选按钮（兼容IE6）

表单美化-原生javascript和jQuery多选按钮（兼容IE6）的更多相关文章

随机推荐

热门专题