Remove calling from array on Uncheck of checkbox

I want to manipulate the array by checking and un-checking of the check box. I have a array list and I want to remove the item from the array on un-checking check-box. By default list must be shown and checkbox must be checked.

Here is the fiddle.

<div id="tab1" class="tab-pane">
    <input type="checkbox" class="chkbox" id="may_c">  Item 1
    <input type="checkbox" class="chkbox" id="ra_P">  Item 2
    <input type="checkbox" class="chkbox" id="wast_M">  Item 3
    </div>

<div id="items">
    <ul id="mainPanel">
    </ul>

var mainPanel = [  
    {       title : "Mayor's Conner", id : "may_C"  
    }, 

    {    title : "Report A Problem", id : "ra_P"    
    }, 

    {  title : "Waste Management",id : "wast_M" 
    }]
    function createmenuPnl() {
        var items = '';
        //ul = $(".mainMenu:empty"); 
        var ulStr = "<ul>";
        for (var i = 0; i < mainPanel.length; i++) {
            items += '<li><a href="' + mainPanel[i].url + '"id="' + mainPanel[i].id +'"><span><img src="' + mainPanel[i].imgSrc + '"/>&nbsp;&nbsp;' + mainPanel[i].title
            + '</span></a></li>';
        }
        ulStr+= items;
        ulStr+='</ul>';
        console.log('The genrated list formed is:'+ulStr);
        $("#cssmenu").empty();
        $("#cssmenu").append(ulStr);
        $("#cssmenu").trigger( "updatelayout" ); 
    }

    $(document).ready(function() {
        var $list = $("#mainPanel");

        $(".chkbox").change(function() {
            var a = this.id;
            if (this.checked) {
                $list.append('<li'+mainpanel.id '>' + mainPanel.title + '</li>');
            }
            else {
                $("#mainPane li:contains('"+a+"')").slideUp(function(){
                   $(this).remove();
                })
            }

        })
    })