Html中使用自定义图片来实现checkbox显示的方法

如果需要使用图片来实现checkbox的使用，可以使用来实现，实现原理是将label表签代替checkbox的显示，将checkbox的display设置为none,在label标签中使用要显示的图片img，再使用js函数去控制图片的选中与否的切换。

 
 JavaScript Code  复制内容到剪贴板 

 
       <label    for  =  "agree"   >                  
              <img    class  =  "checkbox"   alt=  "选中"   src=  "img/checked.png"   id=  "checkimg"   onclick=  "checkclick();"  >      
           </label>         
           <input type=  "checkbox"    style=  "display:none"   id=  "agree"   checked=  "checked"  >      
           <script>      
                 function   checkclick(){      
                    var   checkimg = document.getElementById(  "checkimg"  );      
                    if  ($(  "#agree"  ).is(  ':checked'  ) ){      
                      $(  "#agree"  ).attr(  "checked"  ,  "unchecked"  );      
                      checkimg.src=  "img/unchecked.png"  ;      
                      checkimg.alt=  "未选"  ;      
                  }   else  {      
                      $(  "#agree"  ).attr(  "checked"  ,  "checked"  );      
                      checkimg.src=  "img/checked.png"  ;      
                      checkimg.alt=  "选中"  ;      
                  }      
              }      
          </script>     
 


以上就是小编为大家带来的Html中使用自定义图片来实现checkbox显示的方法全部内容了，希望大家多多支持~

      
查看更多关于Html中使用自定义图片来实现checkbox显示的方法的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did37464