表单美化-原生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 ...

随机推荐

启用WCF测试客户端的相关技巧
在Visual Studio之外打开WCF测试客户端有两种方法:第一种方法是到其所在路径(Visual Studio安装路径\Common7\IDE\WcfTestClient.exe)双击打开.第二 ...
JSONArray遍历
java代码方法一: 1 2 3 4 5 JSONArray array = JSONArray.fromObject(data); for (Object object : array) { ...
hdwik中view模块的应用
概述 MVC中的视图view 主要负责页面显示部分,所有的页面显示全部在此实现,视图对整个页面负责,它通过control的调用来显示页面和数据.视图(view)类template.cla ...
在lua的string库和正则表达式
一.前提要了解一下lua 的string几个方法 1. string库中所有的字符索引从前往后是1,2,...;从后往前是-1,-2,... 2. string库中所有的function都不会直接操作 ...
网络编程中获取域名和id的方法
package com.lanqiao.java.test; import java.net.InetAddress;import java.net.UnknownHostException; pub ...
Accepted Necklace
Accepted Necklace Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
JAVA基础知识之List集合
List接口和ListIterator接口介绍 List集合新增方法 List集合判断元素重复的标准 ListIterator List.ArrayList和List.Vector 固定长度的List ...
一个html5开发工具
今天推荐一个Html5开发工具 sublimetext3 找了一个注册码可用 —– BEGIN LICENSE —– Michael Barnes Single User License EA7E- ...
mongodb（4查询）
第一个参数决定要返回那些文档 db.test.find()返回所有文档 db.test.find({"age":27}) db.test.find({"username& ...
Jams倒酒(pour)
1.Jams倒酒(pour) Jams是一家酒吧的老板,他的酒吧提供2种体积的啤酒,a ml 和 b ml,分别使用容积为a ml 和 b ml的酒杯来装载. 酒吧的生意并不好.Jams发现酒鬼们都很 ...

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

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

随机推荐

热门专题