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

posted @ 2014-10-27 17:01 rose_sun 阅读(517) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

rose_sun

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

公告