無需太多的代碼利用超鏈接即可實(shí)現(xiàn)簡單自定義漂亮復(fù)選框

字號(hào):


    今天突然就在想,html中的復(fù)選框可更改的樣式有限,而且現(xiàn)在制作一個(gè)復(fù)選框需要寫很多代碼,然后我就想到一個(gè)簡單的實(shí)現(xiàn)方式。完全證明了這是可行的。多的不說,直接貼出源代碼,供大家參考。
    實(shí)現(xiàn)效果:
    名單
    代碼:
    html代碼片段:
    代碼如下:
    <a name="checkWeek"></a> 周一
    javaScript代碼片段:
    代碼如下:
    $("a[name='checkWeek']").click(function(){
    if($(this).hasClass('divCheckBoxSel')){
    $(this).removeClass('divCheckBoxSel');
    }else{
    $(this).addClass('divCheckBoxSel');
    }
    });
    css代碼片段:
    代碼如下:
    .divCheckBoxNoSel{
    background: url("../image/checkboxNoSel.jpg") no-repeat center center;
    float:left;
    width:15px;
    height:15px;
    border:1px solid #BDBDBD;
    color:#FFF;
    }
    .divCheckBoxSel{
    background: url("../image/checkboxSel.jpg") no-repeat center center;
    float:left;
    width:15px;
    height:15px;
    border:1px solid #BDBDBD;
    color:#FFF;
    }
    區(qū)分每一個(gè)超鏈接就不在做出說明了可以有很多種方式,實(shí)際上內(nèi)似的像單選框按鈕也可以這樣子輕松實(shí)現(xiàn),從而節(jié)省時(shí)間。