1. 首页
  2. 问答
  3. 在jquery.mobile中自定义没有标签的复选框

在jquery.mobile中自定义没有标签的复选框

2013-08-05 48 views

回答

0 
<!DOCTYPE html> 
<html> 
    <head> 
    <title>test checkbox</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 

     <style> 
     .checkbox-left{ 
      position: absolute; 
      left: 10px; 
      top: 28%; 
      width: 18px; 
      height: 18px; 
      background: #d9d9d9; 
      border-radius: 3px; 
     } 

     .not-checked, .checked { 
      background-image: url("http://www.dragan-gaic.info/elements.png"); 
      background-repeat: no-repeat; 
     } 

     .not-checked { 
      background-position: 18px 0; 
      background-color:#d9d9d9; 
     } 

     .checked { 
      background-position: 0 0; 
      background-color:#6496bc;  
     } 

     .hidden-checkbox { 
      display: none; 
     } 
     </style> 
    </head> 
    <body> 

     <div data-role="page" id="testPage"> 
     <div class="checkbox-left"><input type="checkbox" name="testCb" id="testCb" class="hidden-checkbox"/></div> 
     </div> 
      <script type="text/javascript"> 


      $('#testPage').on('pageshow', function(){ 
       $('.checkbox-left').off('click').on('click', function(){ 

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

        $(this).removeClass('checked').addClass('not-checked'); 
        $(this).find('input[type="checkbox"]').attr('checked' , false).checkboxradio("refresh"); 
        } else { 

        $(this).removeClass('not-checked').addClass('checked');    
         $(this).find('input[type="checkbox"]').attr('checked' , true).checkboxradio("refresh"); 
        } 
       }); 
      }); 
     </script> 
    </body> 
</html>

来源

2013-08-07 08:34:11 Sheetal

相关问题

 相关问题