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）页面结构

 

　　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库）

 

　　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

 

　　$（'

 

　　//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库，再引入上面的代码后，就可以执行下面的代码

 

　　$（'input'）。customInput（）;

 

　　（3）生成的外层div

 

　　如果你的代码结构是label和input成对写的话，那么在它们的外层就会生成一个div，如图