Check box uncheck Remove item from list

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.

<div id="x">
  <input type="checkbox" class="chkbox" value="Home"> Home
  <input type="checkbox" class="chkbox" value="Mayor Conner"> Mayor Conner
</div>
</br></br></br>

<div class="mainPanel">
  <div id="cssmenu">

  </div>
</div>

var mainPanel = [{
  title: "Home",
  id: "lnk_home"
}, {
  title: "Mayor's Conner",
  id: ""
}];

$(document).ready(function createlist() {
  console.log('createlist called');
  var items = '';
  var ulStr = "<ul>";
  for (var i = 0; i < mainPanel.length; i++) {
    items += '<li><a href="" id="' + mainPanel[i].id + '">' + mainPanel[i].title + '</a></li>';
  }
  ulStr += items;
  ulStr += '</ul>';
  $("#cssmenu").append(ulStr);
});

$(document).ready(function() {
  var $mlist = $("#menuPanel");

  $(".chkbox").onchange(function() {
    var list = this.value;
    if (this.checked) {
      $list.append('<li>' + mlist + '</li>');
    } else {
      $("#menuPanel li:contains('" + mlist + "')").slideUp(function() {
        $(this).remove();
      })
    }

  })
});

Here is fiddle