前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化。我们的想法是：利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式，就是说用什么的样式是由按钮的状态来决定。
用到的图片
效果
代码我就不具体一步一步做了有兴趣的童鞋可以参见下我第一篇美化表单的文章http://blog.csdn.net/qianqianyixiao1/article/details/40422769
首先我们用原生的javascript来做这个效果
需要注意的是IE8以下是不支持getElementsByClassName这个方法的，所以这个代码就兼容的是IE9+；等下我们就来改下代码是它满足IE8以前的浏览器，也许你们会问既然不支持getElementsByClassName那换成getElementsByTagName啊!不也同样可以获取所有的label吗？是的换成getElementsByTagName在这里效果也是可以的，不信大家可以把下面的代码复制直接把getElementsByClassName的地方改为getElementsByTagName("label")然后修改下相应的代码（我们在下面给出代码）效果也是一致的就可以兼容IE的老版本了，但是我为什么要纠结于用类呢？聪明的童鞋大概都已经想到了，这样做主要是为了代码能够更好的重用大家都知道一个表单里面的label元素里面的不可能全部都是多选按钮对吧 也有可能是单选按钮，所以我们这里就给多选按钮全部添加一个类然后做统一的处理这样就不会影响其他同样是label但是下面不是多选按钮的元素了，除了这种方法，要区别其他元素还有很多方法，例如给单选按钮的外层增加一个父容器也是可以的，只是这样会增加许多无用的标签，具体用什么的方法大家自己看具体的项目分析。
换成getElementsByTagName后的代码如下，现在的代码是兼容IE5+，因为我的机子最低的就是IE5，大家有的可以用其他来测试下，当然了 现在我们只需兼容到IE7就好了，也许有的还要兼容ie6,具体的看自己的需求吧。
javascript最终版
然后我们用jQuery：惯例我们测试的是IE5+用
知识点：
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=