表單美化-原生javascript和jQuery多選按鈕（兼容IE6） - xiaominwu－IT工程師數位筆記本

文章出處

前些天我們講了下單選按鈕的美化今天來做表單元素多選按鈕的美化。我們的想法是：利用多選按鈕是否被選中和是否不給選擇的特性來為按鈕的父元素添加對應的樣式，就是說用什么的樣式是由按鈕的狀態來決定。

用到的圖片

效果

代碼我就不具體一步一步做了有興趣的童鞋可以參見下我第一篇美化表單的文章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=

文章列表

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds

表單美化-原生javascript和jQuery多選按鈕（兼容IE6） - xiaominwu

歷史上的今天

留言列表

參觀人氣

文章搜尋

最新文章

文章精選

誰來我家

熱門文章

文章分類

最新留言

QR Code

POWERED BY