jQM Listview + Checkbox - Older

by Dragan Gaić

HTML

<!DOCTYPE html> 
<html> 
   <head> 
       <meta charset="utf-8"/>
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
       <meta name="viewport" content="width=device-width, initial-scale=1"/> 
       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
       <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
       <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  </head> 

<body>
 <div data-role="page" id="index">
   <div data-role="content" id="content">
        <ul data-role="listview" data-theme="c" data-dividertheme="d">
            <li data-icon="false">
                <div class="checkBoxLeft">
                    <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox"/>
                </div>
                <a href="#" class="detailListText">Message 1 </a>
            </li>
            <li data-icon="false">
                <div class="checkBoxLeft">
                    <input type="checkbox" name="checkbox-1" id="checkbox-1" class="hidden-checkbox" checked="checked" />
                </div>
                <a href="#" class="detailListText">Message 2 </a>
            </li>
        </ul>
   </div>
 </div>
 <script>
    
 </script>
</body>
</html>

CSS

.detailListText{
    margin: 0 0 0 20px;
}

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

.hidden-checkbox {
    display: none;
}

.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;    
}

JavaScript

$('#index').live('pagebeforeshow',function(e,data){
    $('input[type="checkbox"]').each(function(){
        ($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
    });
});

$('.checkBoxLeft').bind('click', function(e) {
    if($(this).find('input[type="checkbox"]').is(':checked')){
       $(this).removeClass('checked').addClass('not-checked'); 
       $(this).find('input[type="checkbox"]').attr('checked' , false);
    } else {
       $(this).removeClass('not-checked').addClass('checked');             
       $(this).find('input[type="checkbox"]').attr('checked' , true);
    }
});