無需太多的程式碼利用超連結即可實現簡單自訂漂亮複選框_HTML/Xhtml_網頁製作

今天突然就在想，html中的複選框可更改的樣式有限，而且現在製作一個複選框需要寫很多程式碼，然後我就想到一個簡單的實作方式。完全證明了這是可行的。多的不說，直接貼出原始碼，供大家參考。

實現效果：

未選中時：選中時：

圖片背景：

checkboxSel.jpg

checkboxNoSel.jpg

碼：

html代碼

複製代碼

代碼如下:

週一

javaScript程式碼片段：

複製程式碼

複製程式碼

複製程式碼


程式碼>
$("a[name='checkWeek']").click(function(){
if($(this).hasClass('divCheckBoxSel')){
$(this). removeClass('divCheckBoxSel');
}else{
$(this).addClass('divCheckBoxSel');

}
});

css片段:

複製程式碼

程式碼如下:

float:left;
width:15px;
height:15px;
border:1px solid #BDBD;
color:#FFF;
}
.divCheckBoxSel{
background: url("../image/checkboxSel.jpg") no-repeat center center;
float:left;
width:15px;
height:15px;
border:1px solid #BDBDBD;
color:#FFF;
}

區分每個超連結就不在做出說明了可以有很多種方式,實際上內似的像單選框按鈕也可以這樣子輕鬆實現，從而節省時間。