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

用到的图片

效果

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

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

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

  1. <span style="font-size:18px;"><!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. .checkboxList input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;}
  8. .checkboxList .icon{display: inline-block;width: 20px;height: 20px;background: url(checkbox.png) -90px 0 no-repeat;position: absolute;left: 0;top: 0;}
  9. .checkboxList{position: relative;}
  10. .checkbox_checked .icon{background-position: -60px -30px;}
  11. .checkbox_disabled .icon{background-position: 0 -90px;}
  12. </style>
  13. <script type="text/javascript">
  14. function showcheckbox(){
  15.     var checkbox_parent="checkboxList";  /*声明几个变量*/
  16. var checked_checkbox_css="checkbox_checked";
  17. var disabled_checkbox_css="checkbox_disabled";
  18.        var lable=document.getElementsByClassName(checkbox_parent);/*获取所有类名为checkboxList ，注意了 getElementsByClassName()获取的是一个数组，IE8以下是不支持getElementsByTagName这个方法的*/
  19. for(var i=0;i<lable.length;i++){  /*遍历所有的lable*/
  20. lable[i].setAttribute("class",checkbox_parent); /*首先每执行该函数的时候都把lable的类还原为只有checkboxList*/
  21. var input=lable[i].getElementsByTagName("input")[0]; /*然后获取当前lable里面的input*/
  22. var oldClass=input.parentNode.getAttribute("class"); /*然后获取当前lable的类*/
  23. var newClass=oldClass+" "+checked_checkbox_css;  /*创建一个变量存放checkboxList和checkbox_checked*/
  24. var newClass2=oldClass+" "+disabled_checkbox_css; /*创建一个变量存放checkboxList和checkbox_disabled*/
  25. if(input.checked){  /*然后判断input是否给选中*/
  26. input.parentNode.className=newClass;  /*是的话就给它的父节点的类为newClass*/
  27. }else if(input.disabled){ /*然后判断input是否不给选中*/
  28.                 input.parentNode.className=newClass2; /*是的话就给它的父节点的类为newClass2*/
  29. }else{
  30.                 input.parentNode.className=oldClass; /*都不满足的话给它的父节点的类为noldClass*/
  31. }
  32. }
  33. }
  34. window.onload=function(){   /*页面载入完毕执行一个匿名函数*/
  35. var lable=document.getElementsByClassName("checkboxList");  /*首先获取页面所有类为checkboxList的lable元素，注意getElementsByClassName()获取的是一个数组*/
  36. for(var i=0;i<lable.length;i++){ /*然后我们遍历所有筛选出来的lable元素*/
  37.         lable[i].onclick=function(){ /* 为它们每个都绑定一个点击事件*/
  38.         showcheckbox();  /*当它们中的任何一个触发即被点击的时候都执行函数showcheckbox*/
  39.         }
  40. }
  41. showcheckbox(); /*就算没有点击lable元素，页面在每次载入的时候都执行一次函数showcheckbox*/
  42. }
  43. </script>
  44.  
  45. </head>
  46. <body>
  47. <form action="#">
  48. <label class="checkboxList" for="checkbox1">
  49. <span class="icon"></span>
  50.         <input type="checkbox" id="checkbox1" checked="checked">
  51.         Unchecked
  52.      </label>
  53.      <label class="checkboxList" for="checkbox2">
  54. <span class="icon"></span>
  55.         <input type="checkbox" id="checkbox2">
  56.         Unchecked
  57.      </label>
  58.      <label class="checkboxList" for="checkbox3">
  59. <span class="icon"></span>
  60.         <input type="checkbox" id="checkbox3">
  61.         Unchecked
  62.      </label>
  63.      <label class="checkboxList" for="checkbox4">
  64. <span class="icon"></span>
  65.         <input type="checkbox" id="checkbox4">
  66.         Unchecked
  67.      </label>
  68.      <label class="checkboxList" for="checkbox5">
  69. <span class="icon"></span>
  70.         <input type="checkbox" id="checkbox5" disabled="disabled">
  71.         Unchecked
  72.      </label>
  73. </form>
  74. </body>
  75. </html></span>

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

  1. <span style="font-size:18px;"><!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. .checkboxList input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;}
  8. .checkboxList .icon{display: inline-block;width: 20px;height: 20px;background: url(checkbox.png) -90px 0 no-repeat;position: absolute;left: 0;top: 0;}
  9. .checkboxList{position: relative;}
  10. .checkbox_checked .icon{background-position: -60px -30px;}
  11. .checkbox_disabled .icon{background-position: 0 -90px;}
  12. </style>
  13. <script type="text/javascript">
  14. function showcheckbox(){
  15.     var checkbox_parent="checkboxList";
  16. var checked_checkbox_css="checkbox_checked";
  17. var disabled_checkbox_css="checkbox_disabled";
  18.        var lable=document.getElementsByTagName("label");/*这里是修改的地方*/
  19. for(var i=0;i<lable.length;i++){
  20. lable[i].setAttribute("class",checkbox_parent);
  21. var input=lable[i].getElementsByTagName("input")[0];
  22. var oldClass=input.parentNode.getAttribute("class");
  23. var newClass=oldClass+" "+checked_checkbox_css;
  24. var newClass2=oldClass+" "+disabled_checkbox_css;
  25. if(input.checked){
  26. input.parentNode.className=newClass;
  27. }else if(input.disabled){
  28.                 input.parentNode.className=newClass2;
  29. }
  30. else{
  31.                 input.parentNode.className=oldClass;
  32. }
  33. }
  34. }
  35. window.onload=function(){
  36. var lable=document.getElementsByTagName("label"); /*这里是修改的地方*/
  37. for(var i=0;i<lable.length;i++){
  38.         lable[i].onclick=function(){
  39.         showcheckbox();
  40.         }
  41. }
  42. showcheckbox();
  43. }
  44. </script>
  45.  
  46. </head>
  47. <body>
  48.  <!-- 兼容所有主流浏览器和ie5+  -->
  49. <form action="#">
  50. <label class="checkboxList" for="checkbox1">
  51. <span class="icon"></span>
  52.         <input type="checkbox" id="checkbox1" checked="checked">
  53.         Unchecked
  54.      </label>
  55.      <label class="checkboxList" for="checkbox2">
  56. <span class="icon"></span>
  57.         <input type="checkbox" id="checkbox2">
  58.         Unchecked
  59.      </label>
  60.      <label class="checkboxList" for="checkbox3">
  61. <span class="icon"></span>
  62.         <input type="checkbox" id="checkbox3">
  63.         Unchecked
  64.      </label>
  65.      <label class="checkboxList" for="checkbox4">
  66. <span class="icon"></span>
  67.         <input type="checkbox" id="checkbox4">
  68.         Unchecked
  69.      </label>
  70.      <label class="checkboxList" for="checkbox5">
  71. <span class="icon"></span>
  72.         <input type="checkbox" id="checkbox5" disabled="disabled">
  73.         Unchecked
  74.      </label>
  75. </form>
  76. </body>
  77. </html></span>

javascript最终版

  1. <span style="font-size:18px;"><!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. .checkboxList input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;}
  8. .checkboxList .icon{display: inline-block;width: 20px;height: 20px;background: url(checkbox.png) -90px 0 no-repeat;position: absolute;left: 0;top: 0;}
  9. .checkboxList{position: relative;}
  10. .checkbox_checked .icon{background-position: -60px -30px;}
  11. .checkbox_disabled .icon{background-position: 0 -90px;}
  12. </style>
  13. <script type="text/javascript">
  14. function getClassName(classname,idbox){  /* 获取含有某个类的函数*/
  15.  
  16. var box=document.getElementById(idbox);
  17. var cbox=box || document;
  18. var cbox_elem=cbox.getElementsByTagName('*');
  19. var ctag=new Array();
  20. for(var i=0;i<cbox_elem.length;i++){
  21. var cur_else=cbox_elem[i];
  22. var classnames=cur_else.className.split(' ');
  23. for(var j=0;j<classnames.length;j++){ 
  24.  
  25. if(classnames[j]==classname){
  26. ctag.push(cur_else);
  27. break;
  28. }
  29. }
  30. }
  31. return  ctag;
  32. }
  33.  
  34. function showcheckbox(){
  35.     var checkbox_parent="checkboxList";
  36. var checked_checkbox_css="checkbox_checked";
  37. var disabled_checkbox_css="checkbox_disabled";
  38.         var lable=getClassName(checkbox_parent);/*这里是修改的地方*/
  39.  
  40. for(var i=0;i<lable.length;i++){
  41. lable[i].setAttribute("class",checkbox_parent);
  42. var input=lable[i].getElementsByTagName("input")[0];
  43. var oldClass=input.parentNode.getAttribute("class");
  44. var newClass=oldClass+" "+checked_checkbox_css;
  45. var newClass2=oldClass+" "+disabled_checkbox_css;
  46. if(input.checked){
  47. input.parentNode.className=newClass;
  48. }else if(input.disabled){
  49.                 input.parentNode.className=newClass2;
  50. }
  51. else{
  52.                 input.parentNode.className=oldClass;
  53. }
  54. }
  55. }
  56. window.onload=function(){
  57. var lable=document.getElementsByTagName("label"); /*这里是修改的地方*/
  58. for(var i=0;i<lable.length;i++){
  59.         lable[i].onclick=function(){
  60.         showcheckbox();
  61.         }
  62. }
  63. showcheckbox();
  64. }
  65. </script>
  66.  
  67. </head>
  68. <body>
  69.  <!-- 兼容所有主流浏览器和ie5+  -->
  70. <form action="#" >
  71. <label class="checkboxList" for="checkbox1">
  72. <span class="icon"></span>
  73.         <input type="checkbox" id="checkbox1" checked="checked">
  74.         Unchecked
  75.      </label>
  76.      <label class="checkboxList" for="checkbox2">
  77. <span class="icon"></span>
  78.         <input type="checkbox" id="checkbox2">
  79.         Unchecked
  80.      </label>
  81.      <label class="checkboxList" for="checkbox3">
  82. <span class="icon"></span>
  83.         <input type="checkbox" id="checkbox3">
  84.         Unchecked
  85.      </label>
  86.      <label class="checkboxList" for="checkbox4">
  87. <span class="icon"></span>
  88.         <input type="checkbox" id="checkbox4">
  89.         Unchecked
  90.      </label>
  91.      <label class="checkboxList" for="checkbox5">
  92. <span class="icon"></span>
  93.         <input type="checkbox" id="checkbox5" disabled="disabled">
  94.         Unchecked
  95.      </label>
  96. </form>
  97. </body>
  98. </html>
  99. </span>

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

  1. <span style="font-size:18px;"><!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. .checkboxList input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;}
  8. .checkboxList .icon{display: inline-block;width: 20px;height: 20px;background: url(checkbox.png) -90px 0 no-repeat;position: absolute;left: 0;top: 0;}
  9. .checkboxList{position: relative;}
  10. .checkbox_checked .icon{background-position: -60px -30px;}
  11. .checkbox_disabled .icon{background-position: 0 -90px;}
  12. </style>
  13. <script  src="jquery-1.11.1.min.js"></script>
  14. <script type="text/javascript">
  15. var checkbox_parent=".checkboxList";
  16. var checkbox_input=checkbox_parent+" input[type='checkbox']";
  17. var checked_checkbox_css="checkbox_checked";
  18. var disabled_checkbox_css="checkbox_disabled";
  19.  
  20. function  showCheckbox(){
  21. if($(checkbox_parent).length){ /*每次执行showCheckbox()都判断是否有.checkboxList不为0则有.checkboxList就执行里面的代码*/
  22. $(checkbox_parent).each(function() {  /*第一步先把每个.checkboxList里的.checkbox_checked都清除*/
  23. $(this).removeClass(checked_checkbox_css);
  24. });
  25. $(checkbox_input+":checked").each( function() { /*第二步先把每个.checkboxList里选中的按钮都筛选出来然后给它的父元素添加.checkbox_checked*/
  26. $(this).parent(checkbox_parent).addClass(checked_checkbox_css);
  27. });
  28. $(checkbox_input+":disabled").each( function() { /*第三步先把每个.checkboxList里不能选中的按钮都筛选出来然后给它的父元素添加.checkbox_disabled*/
  29. $(this).parent(checkbox_parent).addClass(disabled_checkbox_css);
  30. });
  31. }
  32. }
  33. $(function(){
  34. $(checkbox_parent).click(function() {    /*当任何一个.checkboxList被点击的时候都执行一次showCheckbox()*/
  35. showCheckbox();
  36. });
  37. showCheckbox();  /* 页面每次载入的时候都执行一次showCheckbox()*/
  38. })
  39. </script>
  40.  
  41. </head>
  42. <body>
  43. <form action="#">
  44. <label class="checkboxList" for="checkbox1">
  45. <span class="icon"></span>
  46.         <input type="checkbox" id="checkbox1" checked="checked">
  47.         Unchecked
  48.      </label>
  49.      <label class="checkboxList" for="checkbox2">
  50. <span class="icon"></span>
  51.         <input type="checkbox" id="checkbox2">
  52.         Unchecked
  53.      </label>
  54.      <label class="checkboxList" for="checkbox3">
  55. <span class="icon"></span>
  56.         <input type="checkbox" id="checkbox3">
  57.         Unchecked
  58.      </label>
  59.      <label class="checkboxList" for="checkbox4">
  60. <span class="icon"></span>
  61.         <input type="checkbox" id="checkbox4">
  62.         Unchecked
  63.      </label>
  64.      <label class="checkboxList" for="checkbox5">
  65. <span class="icon"></span>
  66.         <input type="checkbox" id="checkbox5" disabled="disabled">
  67.         Unchecked
  68.      </label>
  69.  
  70. </form>
  71.  
  72. </body>
  73. </html></span>

知识点：

1：变量：

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

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

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

  1. for (语句 1; 语句 2; 语句 3)
  2.   {
  3.   被执行的代码块
  4.   }

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

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

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

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

3：if语句：

  1. if (条件)
  2.   {
  3.   当条件为 true 时执行的代码
  4.   }
  5. else
  6.   {
  7.   当条件不为 true 时执行的代码
  8.   }

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

代码下载

fo  gfdsgfd=

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

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

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  2. 表单美化-原生javascript和jQuery下拉列表（兼容IE6）

    效果: 思想:用其他标签配合脚本和隐藏的input并通过传值模拟表单元素中的select <!DOCTYPE HTML> <html lang="en-US"&g ...

  3. JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...

  4. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  5. jQuery星级评论表单美化代码

    最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...

  6. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  7. HTML5——表单美化

    闲聊: 今天小颖在跟着慕课网学习:表单美化 看完了自己跟着敲了敲,顺便做个笔记嘻嘻,好记性不如烂笔头,脑子记不住,就写成笔记,以后也方便查看,嘻嘻. 正文: 1.表单美化_单选按钮篇 2.表单美化_复 ...

  8. BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等） 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  9. iCheck表单美化插件使用方法详解（含参数、事件等）

    iCheck   特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...

随机推荐

  1. Caused by: javax.xml.bind.JAXBException: standardPremiumUpdateMessageDTO is not a valid property on

    Caused by: javax.xml.bind.JAXBException:  standardPremiumUpdateMessageDTO is not a valid property on ...

  2. 电视直播用的.m3u8 PC端和移动端地址 【流媒体播放测试专用】

    北邮ivi测试频道 26个高清频道 IPv4 有PC端和移动端地址 [复制链接]     lebo 5 主题 0 好友 1588 积分 卫视少尉 UID 392347 注册时间 2013-11-8 最 ...

  3. C#:只运行一个程序

    一.通过系统事件 1.实现如下: using System; using System.Collections.Generic; using System.Linq; using System.Tex ...

  4. JavaScript 网址

    1. javascript 模板引擎 http://aui.github.io/artTemplate/

  5. 《More Effective C++》

    new operator申请内存,并调用构造函数: 而operator new只申请内存: new operator会调用operator new来申请内存:operator new可以重写或重载: ...

  6. bianwu | 数据行 | 填写意见

    protected void gv1_RowDataBound(object sender, GridViewRowEventArgs e) { //首先判断是否是数据行 if (e.Row.RowT ...

  7. ACM题目————最短路径问题

    Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线,则输出花费最少的. Input 输入n,m,点 ...

  8. 【转】【Android】开源项目汇总-备用

    第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Pro ...

  9. c#之线程池优先级

    using System; using System.Threading; namespace ConsoleApplication1 { class Program { static void Ma ...

  10. Uva 725 除法

    紫书P182 直接枚举 0~9 的全排列会超时,枚举fghij就可以了,计算出 abcde ,这里有一个新的函数,也可以不用咯,把每一位数据提取出来,while循环可以做到,这里的新的函数是,spri ...