漂亮 [checkbox+radio]+label 自定义样式（jQuery ）

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="http://www.w3.org/1999/xhtml" >  
< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />  
< title > 无标题文档 </ title >  

< script  language ="javascript"  src ="jquery-1.3.2.min.js" ></ script >  
< script >  
$(document).ready(  function  () { 
     $( " div " ).cssRadio(); 
     $( " div " ).cssCheckBox(); 
}); 
jQuery.fn.cssRadio  =   function  () { 
    $( " :input[type=radio] + label " ).each(  function (){ 
             if  ( $( this ).prev()[ 0 ].checked ) 
                $( this ).addClass( " checked " ); 
            }) 
        .hover( 
             function () { $( this ).addClass( " over " ); }, 
             function () { $( this ).removeClass( " over " ); } 
            ) 
        .click(  function () { 
              var  contents  =  $( this ).parent().parent();  /* 多组控制 关键 */  
            $( " :input[type=radio] + label " , contents).each(  function () { 
                $( this ).prev()[ 0 ].checked = false ; 
                $( this ).removeClass( " checked " );    
            }); 
            $( this ).prev()[ 0 ].checked = true ; 
             $( this ).addClass( " checked " ); 
            }).prev().hide(); 
}; 

jQuery.fn.cssCheckBox  =   function  () { 
    $( " :input[type=checkbox] + label " ).each(  function (){ 
             if  ( $( this ).prev()[ 0 ].checked ) 
                {$( this ).addClass( " checked " );}            
            }) 
        .hover( 
             function () { $( this ).addClass( " over " ); }, 
             function () { $( this ).removeClass( " over " ); } 
            ) 
        .toggle(  function ()   /* 不能click，不然checked无法回到unchecked */  
            {                
                $( this ).prev()[ 0 ].checked = true ; 
                 $( this ).addClass( " checked " ); 
            }, 
             function () 
            { 
                $( this ).prev()[ 0 ].checked = false ; 
                 $( this ).removeClass( " checked " ); 
            }).prev().hide();           
} 

</ script >  
< style  type ="text/css" >  
<!-- 
body  {  
    background-color :  #FFF ;  
    margin : 0 10px ;  
    color : #999999 ;  
}  
#dx label  {  
padding-left :  26px ;  
background :  url(RUnCheck.png) no-repeat ;  
}  
#dx label.checked  {  
padding-left :  26px ;  
background :  url(RCheck.png) no-repeat ;  
color :  #008800 ;  
}  
#dx label.over  {  
color :  #0000FF ;  
}  

#tt label  {  
padding-left :  26px ;  
background :  url(UnCheck.png) no-repeat ;  
}  
#tt label.checked  {  
padding-left :  26px ;  
background :  url(Check.png) no-repeat ;  
color :  #008800 ;  
}  
#tt label.over  {  
color :  #0000FF ;  
}  
--> 
</ style >  
</ head >  
< body >  
< h3 > Example </ h3 >  
< form  id ="dx" >  
< P > 第一组 </ p >  
< div >  
< p >< input  type ="radio"  name ="radio1" />   < label > Option 1 </ label ></ p >  
< p >< input  type ="radio"  name ="radio1" />   < label > Option 2 </ label ></ p >  
< p >< input  type ="radio"  name ="radio1" />   < label > Option 3 </ label ></ p >  
< p >< input  type ="radio"  name ="radio1" />   < label > Option 4 </ label ></ p >  
</ div >  
< P > 第二组 </ p >  
< div >  
< p >< input  type ="radio"  name ="radio2" />   < label > Option 1 </ label ></ p >  
< p >< input  type ="radio"  name ="radio2" />   < label > Option 2 </ label ></ p >  
< p >< input  type ="radio"  name ="radio2" />   < label > Option 3 </ label ></ p >  
< p >< input  type ="radio"  name ="radio2" />   < label > Option 4 </ label ></ p >  
</ div >  
</ form >  

< div  id ="tt" >  
< p > 第一组> </ p >  
     < div >  
     < p >< input  id ="CheckBox1"  type ="checkbox"   name ="clb1"   />< label  > Checkbox 1 </ label ></ p >  
     < p >< input  id ="CheckBox2"  type ="checkbox"   name ="clb1"   />< label  > Checkbox 2 </ label ></ p >     
     </ div >  
< p > 第二组> </ p >  
     < div >  
     < p >< input  id ="CheckBox3"  type ="checkbox"   name ="clb2" />< label  > Checkbox 3 </ label ></ p >  
     < p >< input  id ="CheckBox4"  type ="checkbox"  name ="clb2" />< label  > Checkbox 4 </ label ></ p >     
     </ div >  
</ div >  

</ body >  
</ html >

 

    本文转自曾祥展博客园博客，原文链接：http://www.cnblogs.com/zengxiangzhan/archive/2009/11/13/1602397.html，如需转载请自行联系原作者