Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve click-to-replace picture special effects on jQuery. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1, cause

Recently, we want to implement a custom radio style in our work, and we usually use the default style, because we really can't think of a solution, so we start to search, and finally see a good solution, which can perfectly solve the problems we encounter.

2, principle

We all know that when writing the structure, radio or checkbox will be used with label. If the for attribute value of label is the same as the id value of input, click label to select input. Here is to use label to override our input default style. By adding background images to label (beautified checkbox or radio), that is, we cannot see the default input (set z-index:-1 to input) during the click process. The click is label, through different events, load different background images (here is to change the location of the background images)

3. Set the default style for beautifying checkbox or radio

(1) Page structure

Which genres do you like?

Action / Adventure

Comedy

Epic / Historical

Science Fiction

Romance

Western

Caddyshack is the greatest movie of all time, right?

Totally

You must be kidding

What's Caddyshack?

(2) jquery code (jquery library must be introduced)

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 [=' + input.attr ('id') +']')

/ / get type,for classname suffix

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

/ / wrap the input + label in a div

$('

/ / 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')

})

}

})

}

After introducing the jquery library and the above code, you can execute the following code

$('input'). CustomInput ()

(3) generated outer div

If your code structure is written in pairs of label and input, a div will be generated on the outer layer of them

This is the end of the article on "how to click and replace pictures in jQuery". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.