修改checkbox的默认样式

html 

<input type="checkbox"/>

 

css

span.myCheck​{    ​​
•display: inline-block;

     width: 13px;

     height: 13px;

    background-image:url("../images/radio.png");

    background-repeat: no-repeat;

   cursor: pointer;

   background-position: 0px -30px;

   margin-right: 3px;

   text-align: center;

​}​

​span.myCheck.mySelect​{

    ​background-position: 0px -45px;

​}​

 

js

     $(function() {

       //默认的样式 包裹

       $.each($('input[type="checkbox"]'),function(i,n){

          $(this).wrap("");

            if($(n).attr('checked')){

             $(n).parent('.myCheck').first().addClass('mySelect');

             }

         });

       //点击后

       $('.myCheck').click(function(){

        //调用点击事件

          $(this).children('input[type="checkbox"]')[0].click(); 

        //不可用时

        if($(this).children('input[type="checkbox"]').attr("disabled")=="disabled"){

            return false;

         }      

        if($(this).children('input[type="checkbox"]').attr('checked')){

           $(this).children('input[type="checkbox"]').removeAttr("checked");

           $(this).removeClass('mySelect');

        }else{

           $(this).children('input[type="checkbox"]').attr('checked','checked');

          $(this).addClass('mySelect');

        }

        //点击全选

         按情况处理

        });   

   });

实现效果