修改radio和checkbox的样式

        最近在做个项目，想把里面的所有原浏览器默认的radio和checkbox的样式修改了，以统一整个网站的风格，在网上找了下，记录这个的不多，现在我就把我项目中个方法贴出来，希望能帮到有同样需求的朋友。

        同样，先上个效果图。

         图里面的小图片是我自己做的，朋友们可以根据自己的需要进行替换。

以下是代码。

这个是jquery代码。

$( function () {
     $("input[type=radio]+label").prev().hide();
     $("input[type=radio]+label:even").css("background-image","url('page/images/A/share/radio2.png')");
     $("input[type=radio]+label:odd").each(function(){
    	 $(this).click(function(){
    	    $(this).css("background-image","url('page/images/A/share/radio2.png')");
    	    $(this).prev("input[type=radio]:last").attr("checked",true);
    	    $(this).parent("td").find("label:first").css("background-image","url('page/images/A/share/radio1.png')");
            $(this).prev("input[type=radio]:first").attr("checked",false);
    	 });
    	 $(this).parent("td").find("label:first").click(function(){
    		 $(this).css("background-image","url('page/images/A/share/radio2.png')");
    		 $(this).prev("input[type=radio]:first").attr("checked",true);
    		 $(this).parent("td").find("label:last").css("background-image","url('page/images/A/share/radio1.png')");
    		 $(this).prev("input[type=radio]:last").attr("checked",true);
    	 });
     });
    
     
     $("input[type=checkbox]+label").prev().hide();
     $("input[type=checkbox]+label").each(function(){
    	 $(this).toggle(function(){
    		 $(this).css("background-image","url('page/images/A/share/checkbox2.png')");
    		 $(this).prev("input[type=checkbox]").attr("checked",true); 
    		 if($(this).prev("input[type=checkbox]").attr("name").indexOf("checkall")!=-1)
    		 {
    			$(this).parents("tr").siblings().each(function(){
    				$(this).find("label").css("background-image","url('page/images/A/share/checkbox2.png')").end().find("input[type=checkbox]").attr("checked",true);
    			});
    		 }
    	 },function(){
    		 $(this).css("background-image","url('page/images/A/share/checkbox1.png')");
    		  $(this).prev("input[type=checkbox]").attr("checked",false); 
    		   if($(this).prev("input[type=checkbox]").attr("name").indexOf("checkall")!=-1)
    		 {
    			$(this).parents("tr").siblings().each(function(){
    				$(this).find("label").css("background-image","url('page/images/A/share/checkbox1.png')").end().find("input[type=checkbox]").attr("checked",false);
    			});
    		 }
    	 });
     });
     });

这个是css代码。

    .rad{padding-left:30px;background: url("../../../images/A/share/radio1.png") no-repeat;height:20px;line-height:20px;verticla-align:middle;cursor: pointer;display:in-line;font-size:14px;}
  .ckb{padding-left:30px;background: url("../../../images/A/share/checkbox1.png") no-repeat;height:25px;line-height:25px;verticla-align:middle;cursor: pointer;display:in-line; font-size:14px;}

这个是html代码。

<table>
    <tr>
         <td >性别：</td><td><input type="radio" name="radio1" title="1"/><label class="rad">男</label>    <input type="radio" name="radio1" title="2"/><label class="rad">女</label></td>
         <td >类型：</td><td colspan="2"><input type="checkbox" name="checkbox1" /><label  class="ckb">卡车 </label> <input type="checkbox" name="checkbox1" /><label  class="ckb">轿车 </label></td>
    </tr>
</table>