jQM - Listview + Checkbox DEMO

by Chandana Thota

HTML

<link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<link rel="stylesheet" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css">
<script src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-theme="a">
                <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox"/>
                    </div>                    
                    <a href="item1.html" class="detailListText">item1</a>
                </li>
                <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" checked="checked"/>
                    </div>                     
                    <a href="item1.html" class="detailListText">item1</a>
                </li>
                <li>
                    <div class="checkBoxLeft">
                        <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" checked="checked"/>
                    </div>                     
                    <a href="item1.html" class="detailListText">item1</a>
                </li>
            </ul>
        </div>

 ...

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

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

$(document).on('click', '.checkBoxLeft', function(){       
    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);
    }
    
    // Do something here
});