toggling the image jquery mobile

Question

I have a collapsible set and to which I have added listview to each collapsible set.

list view I am creating dynamically like below

var li = '<li data-icon="false" data-theme="a" ><h5><img src="unselected.png" width="auto" height="3%" >' + row['Date'] + '</h5></li>';     

and I want to toggle the image button upon clicking on list item and I am doing this way

$('ul').children('li').off('click').on('click', function () {
    var currentimg = $(this).find('img').attr('src');
    if (currentimg == "unselected.png") {
        $(this).find('img').attr('src', 'selected.png');
    } else {
        $(this).find('img').attr('src', 'unselected.png');
    }
});     

now in my list view only one item should have selected.png others should have unselected.png, how can I do that?

Thanks:)

Answer 1

Working example: http://jsfiddle.net/Gajotres/3H4g8/

$(document).on('pagebeforeshow', '#index', function(){ 
    $('ul').children('li').off('click').on('click', function () {
        var clickedItem = $('ul li').index(this);
        var currentimg = $(this).find('img').attr('src');
        if (currentimg == "http://beaglehappy.com/wp-content/uploads/2012/03/beagle-puppy-training-50x50.jpg") {
            $(this).find('img').attr('src', 'http://profile-a.xx.fbcdn.net/hprofile-snc6/276874_259622770824534_1630725890_q.jpg');
        } else {
            $(this).find('img').attr('src', 'http://beaglehappy.com/wp-content/uploads/2012/03/beagle-puppy-training-50x50.jpg');
        }

        $( "li" ).each(function( index ) {
            var loopLi = $(this);            
            if(clickedItem != index) {              
                loopLi.find('img').attr('src', 'http://profile-a.xx.fbcdn.net/hprofile-snc6/276874_259622770824534_1630725890_q.jpg');
            }
        });         

    });      
});