I'm trying to combine these two leaflet tutorials:

<http://leafletjs.com/examples/layers-control.html>

<http://leafletjs.com/examples/choropleth.html>

I'm using a layer control where the user can switch between tile providers and also can switch on the GeoJSON data.
**JSFiddle**: <http://jsfiddle.net/jrzd4448/2/>

```
var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

// initialize map
var map = L.map('map', {
    center: [37.8, -96],
    zoom: 4,
    layers: [OpenStreetMap_Mapnik]
});

var baseMaps = {
    "Mapnik": OpenStreetMap_Mapnik,
    "Black and White": OpenStreetMap_BlackAndWhite
};

loadstates = L.geoJson(statesData);
var states = {
    "US States": loadstates
};

L.control.layers(baseMaps, states).addTo(map);

```

I want that the GeoJSON layer ("US States") is automatically selected when the "Black & White" layer is selected. And accordingly deselected when switching back to "Mapnik".
Do I have to use something like [this](http://leafletjs.com/reference.html#control-layers-baselayerchange) or `addlayer` or a jQuery function?
I guess it would be best not to load the GeoJSON data at all until the according layer is clicked?

I tried building a LayerGroup which does not work.

```
var baseMaps = {
    "Mapnik": OpenStreetMap_Mapnik,
    "Black and White": OpenStreetMap_BlackAndWhite
};

loadstates = L.geoJson(statesData);
var group = L.layerGroup([OpenStreetMap_BlackAndWhite, loadstates]);
var statesandlayer = {
    "Group": group
};

L.control.layers(baseMaps, statesandlayer).addTo(map);

```

Thanks for ideas!