Add items with checkboxes on a list via Listview

Add items with checkboxes on a list via Listview

BY 28 Apr 2015 Web Application Development

Hi, 

I’m trying to add in my application a dynamic list with checkboxes. But all tries failed and the result isnt a correct display of the list item – or better the checkbox looks not like on a static list, its just a small native checkbox.

With all other types I have no problem to generate the list dynamic, only checkboxes.

My code

function generateChechkboxList() {
    var ls = localStorage.getItem('db'),
        list = document.querySelector('div.ui-page-active div[data-role=content] ul'),
    	listView = tau.widget.Listview(list);

    if(ls)
    {
        var data = JSON.parse(ls).results,
            listItem = '';

        listItem = '<li data-role="list-divider" data-style="dialogue">Selected: <span id="count">0</span></li>';
    	listView.addItem(listItem, 0);

        jQuery.each(data, function(index, value) {
            listItem = '<li class="ui-li-has-multiline ui-li-dialogue"><a href="#">'
    			+ '<input type="checkbox" name="deleteCheckbox" id="li'+i+'" data-event-id="'+item.eventId+'" />'
				+ item.title
				+ '<span class="ui-li-text-sub">'+status+': '+item.person+'</span>'
				+ '</a></li>';
			listView.addItem(listItem, 1);
        });
    }
}

Without checkbox the list item will show correct 🙂

Written by