ol3 layertree checkbox

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
ol3 layertree checkbox 
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div id="map" class="map">
                <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a>

                    <div id="popup-content"></div>
                </div>
                <div class="col-md-12">OpenStreetMap&nbsp; &nbsp;
                    <input type="checkbox" onclick="toggleOSM()" name="my-checkbox" id="osmCheck" checked data-size="mini">
                        
                        <div id="layertree"></div>
                </div>
            </div>
        </div>
    </div>

CSS

html, body, #map {
    width: 100%;
    height: 70%;
}
#map {
    position: absolute;
}
.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 55px;
    left: -50px;
}
.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}
.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.ol-popup-closer:after {
    content:"✖";
}

JavaScript

var nottingham = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([-1.141092, 52.948222], 'EPSG:4326', 'EPSG:3857')),
    name: 'Nottingham'
});

var london = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([-0.092236, 51.502684], 'EPSG:4326', 'EPSG:3857')),
    name: 'London'
});

var manchester = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([-2.232212, 53.480188], 'EPSG:4326', 'EPSG:3857')),
    name: 'Manchester'
});

var birmingham = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([-1.900878, 51.483952], 'EPSG:4326', 'EPSG:3857')),
    name: 'Birmingham'
});

var leeds = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([-1.556692, 53.793635], 'EPSG:4326', 'EPSG:3857')),
    name: 'Leeds'
});

var southampton = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([-1.556692, 50.793635], 'EPSG:4326', 'EPSG:3857')),
    name: 'Southampton'
});

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'http://openlayers.org/en/v3.3.0/examples/data/icon.png'
    }))
});

manchester.setStyle(iconStyle);
london.setStyle(iconStyle);
nottingham.setStyle(iconStyle);
leeds.setStyle(iconStyle);
birmingham.setStyle(iconStyle);
southampton.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
    features: [nottingham, birmingham, leeds, london, manchester]
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    name: 'Cities Layer 1',
    visible: true,
    slider: true,
    layerTree: 1
});

var vectorSource2 = new ol.source.Vector({
    features: [southampton]
});

var vectorLayer2 = new ol.layer.Vector({
    source: vectorSource2,
    name: 'Cities Layer 2',
    visible: false,
    slider: false,
    layerTree: 2
});

var rasterLayer = new ol.layer.Tile({
 ...