listview with checkboxes

by seboulba

HTML

<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Lists</h1>
    </div>
    
    <div data-role="content">
        <ul data-role="listview">
            <li>list1</li>
            <li>list2</li>
        </ul>
    </div>
</div>

<div data-role="page" id="list-details"> 
    
    <div data-role="header">
        <h1>list</h1>
    </div> 
    
    <div data-role="content"> 
        <ul data-role="listview"></ul>            
    </div> 
    
</div>

JavaScript

var allItems = {
    1: ['item11', 'item12', 'item13'],
    2: ['item21', 'item22', 'item23']
}

$('#home div[data-role=content] ul li').click(function() {
    loadList($(this).html().replace(/[^\d]+/, ''));
});

function loadList(id) {
    var items = allItems[id];
    var html = '';
    for (var i = 0; i < items.length; i++) {
        html += '<li>'+
            '<input id="id'+id+'-'+ i +'" type="checkbox" />'+
            '<label for="id'+id+'-'+ i +'">' + items[i] + '</label>'+
        '</li>';
    }
    var itemContainer = $('#list-details div[data-role=content] ul').first();
    itemContainer.html(html);
    try {
        itemContainer.listview('refresh');
        $('input', itemContainer).checkboxradio('refresh');
    } catch (e) {
        itemContainer.listview();
        $('input', itemContainer).checkboxradio();
    }

    $.mobile.changePage('#list-details');
}