jQuery實現自定義checkbox和radio樣式

時間 2019-11-08

標籤 jquery 實現自定義 checkbox radio 樣式欄目 JQuery 简体版

原文原文鏈接

jQuery實現自定義checkbox和radio樣式

1，原由

最近在工做中要實現自定義式的radio樣式，而咱們一般使用的時默認的樣式，由於本身實在想不到解決的方法，因而開始搜索，最終看到了不錯的解決辦法，能夠完美解決咱們遇到的問題。

2，原理

你們都知道在寫結構的時候，radio或checkbox都會跟隨label一塊兒使用，label的for屬性值和input的id值相同的狀況下，點擊label就能夠選中input，這裏正是利用label 來覆蓋咱們的input默認樣式，經過給label添加背景圖片（美化的checkbox或radio），也就是在點擊的過程當中，咱們是看不到默認的input的（給input設置z-index:-1），而點擊的是label，經過不一樣的事件，加載不一樣的背景圖片（這裏是改變背景圖片的位置）

3，設置美化checkbox或radio的默認樣式

（1）頁面結構

jquery

?web

< form class = "form" method = "post" >

< fieldset >

< legend >Which genres do you like?</ legend >

< input type = "checkbox" value = "action" id = "check-1" name = "genre" >< label for = "check-1" class = "" >Action / Adventure</ label >

< input type = "checkbox" value = "comedy" id = "check-2" name = "genre" >< label for = "check-2" class = "" >Comedy</ label >

< input type = "checkbox" value = "epic" id = "check-3" name = "genre" >< label for = "check-3" class = "" >Epic / Historical</ label >

< input type = "checkbox" value = "science" id = "check-4" name = "genre" >< label for = "check-4" class = "" >Science Fiction</ label >

< input type = "checkbox" value = "romance" id = "check-5" name = "genre" >< label for = "check-5" class = "" >Romance</ label >

< input type = "checkbox" value = "western" id = "check-6" name = "genre" >< label for = "check-6" class = "" >Western</ label >

</ fieldset >

< fieldset >

< legend >Caddyshack is the greatest movie of all time, right?</ legend >

< input type = "radio" value = "1" id = "radio-1" name = "opinions" >< label for = "radio-1" class = "" >Totally</ label >

< input type = "radio" value = "1" id = "radio-2" name = "opinions" >< label for = "radio-2" class = "" >You must be kidding</ label >

< input type = "radio" value = "1" id = "radio-3" name = "opinions" >< label for = "radio-3" class = "" >What's Caddyshack?</ label >

</ fieldset >

</ form >

（2）jquery code（前提必須引入jquery庫）

app

?post

jQuery.fn.customInput = function (){

$( this ).each( function (i){

if ($( this ).is( '[type=checkbox],[type=radio]' )){

var input = $( this );

//get the associated label using the input's id

var label = $('label[ for = '+input.attr(' id ')+' ] ');

//get type,for classname suffix

var inputType = (input.is(' [type=checkbox] ')) ? ' checkbox ' : ' radio ';

//wrap the input + label in a div

$(' <div class = "custom-'+ inputType +'" ></div> ').insertBefore(input).append(input,label);

//find all inputs in this set using the shared name attribute

var allInputs = $(' input[name= '+input.attr(' name ')+' ] ');

//necessary for browsers that don' t support the :hover pseudo class on labels

label.hover( function (){

$( this ).addClass( 'hover' );

if (inputType == 'checkbox' && input.is( ':checked' )) {

$( this ).addClass( 'checkedHover' );

}

}, function (){

$( this ).removeClass( 'hover checkedHover' );

});

//bind custom event, trigger it, bind click,focus,blur events

input.bind( 'updateState' , function (){

if (input.is( ':checked' )){

if (input.is( ':radio' )){

allInputs.each( function (){

$( 'label[for=' +$( this ).attr( 'id' )+ ']' ).removeClass( 'checked' );

});

};

label.addClass( 'checked' );

} else {

label.removeClass( 'checked checkedHover checkedFocus' );

}

})

.trigger( 'updateState' )

.click( function (){

$( this ).trigger( 'updateState' );

})

.focus( function (){

label.addClass( 'focus' );

if (inputType == 'checkbox' && input.is( ':checked' )) {

$( this ).addClass( 'checkedFocus' );

}

})

.blur( function (){

label.removeClass( 'focus checkedFocus' );

});

}

});

}

引入jquery庫，再引入上面的代碼後，就能夠執行下面的代碼

this

?url

1	`$(` `'input'` `).customInput();`

（3）生成的外層div

若是你的代碼結構是label和input成對寫的話，那麼在它們的外層就會生成一個div，如圖

（4）設置自定義默認樣式

準備好一張圖，以下：

你可能會問，爲何上面沒有在頂端，而是有必定的距離，由於咱們的input選項可能是居中的，而咱們是使用label的背景圖片來模擬的，因此咱們是爲了讓input選項居中顯示。總之：ico小圖標必定要垂直排列，必定要留有必定的距離來達到居中顯示。

spa