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

阿新 • • 發佈：2019-01-15

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

用到的圖片

效果

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

SpringBoot防止重複請求，重複表單提交超級簡單的註解實現之四（終極版）

簡單講解KMP單模式匹配與AC演算法多模式匹配（KMP篇）

上傳檔案form表單enctype="multipart/form-data"傳值解決辦法（代原始碼）

bootstrap下拉多選框（bootstrap-select）

推薦幾款很棒的 JavaScript 表單美化和驗證外掛

JavaScript和jquery取消表單提交

純原生javascript下拉框表單美化例項教程

JavaScript 驗證表單不為空和獲取select下拉列表的值和文本

Java學習總計（二十六）——JavaScript正則表達式，Js表單驗證,原生js+css頁面時鐘

1、Jquery form表單ajax提交 2、jquery.filter校驗多個相同型別的文字框是否輸入資料有重複

Jquery點選按鈕非同步和同步提交表單

JQuery 設定表單元素的 readonly 和 disabled 屬性

利用原生js和jQuery實現單選框的勾選和取消操作

原生nodejs在koa中獲取表單提交的資料和利用koa-bodyparser

跨域問題相關知識詳解（原生js和jquery兩種方法實現jsonp跨域）

將原生JS和jquery裏面的DOM操作進行了一下整理

html5 表單填表 select 下拉 textarea多行文本 output Js計算結果

表單添加ip和url 和當前時間

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

相關推薦