jQuery实现自定义checkbox和radio样式

<

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

>

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'

);

});

}

});

}

$(

'input'

).customInput();

/* wrapper divs */

.custom-checkbox,

.custom-radio {

position

:

relative

;

display

:inline-

block

;

}

/* input, label positioning */

.custom-checkbox input,

.custom-radio input {

position

:

absolute

;

left

:

2px

;

top

:

3px

;

margin

:

0

;

z-index

:

-1

;

}

.custom-checkbox label,

.custom-radio label {

display

:

block

;

position

:

relative

;

z-index

:

1

;

font-size

:

1.3em

;

padding-right

:

1em

;

line-height

:

1

;

padding

:.

5em

0

.

5em

30px

;

margin

:

0

0

.

3em

;

cursor

:

pointer

;

}

/* ==默认状态效果== */

.custom-checkbox label {

background

:

url

(images/checkbox.gif)

no-repeat

;

}

.custom-radio label {

background

:

url

(images/button-radio.png)

no-repeat

;

}

.custom-checkbox label,

.custom-radio label {

background-position

:

0px

0px

;

}

/*==鼠标悬停和得到焦点状态==*/

.custom-checkbox label.hover,

.custom-checkbox label.focus,

.custom-radio label.hover,

.custom-radio label.focus {

/*background-position:-10px -114px;*/

}

/*==选中状态==*/

.custom-checkbox label.checked,

.custom-radio label.checked {

background-position:0px -47px;

}

.custom-checkbox label.checkedHover,

.custom-checkbox label.checkedFocus {

/*background-position:-10px -314px;*/

}

.custom-checkbox label.focus,

.custom-radio label.focus {

outline:1px dotted 

#ccc;

}