how to use select and unselect for master and sublayers

I 5 layer group(master) and 5 sub-layers.I have done little bit code,in this code by default layer group and sub-layers are selected but When I unselect the master layer, it doesn't unselect the sub-layers below automatically and vice versa.This is code.

<div id="layertree">
    <fieldset  id="layer3" style="border:0">
    <label class="font"><input id="visible1" class="visible" type="checkbox"/><b>Local Lines</b></label>
          </fieldset>
           <ul class="demo">
          <li>
          <label class="checkbox-inline" >
          <fieldset  id="layer30" style="border:0">
        <input id="visible1" class="visible" type="checkbox"/> </fieldset>
        <span class="dash"></span>
        &nbsp Western</label>
        </li>

         <li>
          <label class="checkbox-inline" >
         <fieldset  id="layer31" style="border:0">
        <input id="visible1" class="visible" type="checkbox"/> </fieldset>
        <span class="dash1"></span>
        &nbsp Central</label>
        </li>

         <li>
         <label class="checkbox-inline">
         <fieldset  id="layer32" style="border:0">
        <input id="visible1" class="visible" type="checkbox"/> </fieldset>
        <span class="dash2"></span>
        &nbsp Harbour</label>
        </li>

         <li> 
         <label class="checkbox-inline">
         <fieldset  id="layer33" style="border:0">
        <input id="visible1" class="visible" type="checkbox"/></fieldset>
          <span class="dash3"></span>
        &nbsp Thane-Vashi</label>
        </li>

         <li>
          <label class="checkbox-inline">
          <fieldset  id="layer34" style="border:0">
        <input id="visible1" class="visible" type="checkbox"/></fieldset>
          <span class="dash4"></span>
        &nbsp Indian-Rail</label>
        </li></ul>



var localgroup=new ol.layer.Group({
 layers:
 [
 new ol.layer.Tile({

source: new ol.source.TileWMS({
  url: 'http://ift.tt/2rgk1IB',
  params:
  {
  layers:'Bank:western_project'
  }
})
 }),
 new ol.layer.Tile({

source: new ol.source.TileWMS({
  url: 'http://ift.tt/2rgk1IB',
  params:
  {
  layers:'Bank:central_project'
  }
})
 }),
 new ol.layer.Tile({

source: new ol.source.TileWMS({
  url: 'http://ift.tt/2rgk1IB',
  params:
  {
  layers:'Bank:harbour_project'
  }
})
 }),
 new ol.layer.Tile({

source: new ol.source.TileWMS({
  url: 'http://ift.tt/2rgk1IB',
  params:
  {
  layers:'Bank:thane_vashi_project'
  }
})
 }),
 new ol.layer.Tile({

source: new ol.source.TileWMS({
  url: 'http://ift.tt/2rgk1IB',
  params:
  {
  layers:'Bank:indian_rail_project'
  }
})
 })

 ]
 });
 (function() {
var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Group({
            'title': 'Base maps',
            layers: [

                new ol.layer.Tile({
                    title: 'OSM',
                    type: 'base',
                    visible: false,
                    source: new ol.source.OSM()
                }),
                new ol.layer.Tile({
                    title: 'Satellite',
                    type: 'base',
                    visible: true,
                    source: new ol.source.XYZ({
                    url:"http://ift.tt/2rPn5IZ",

                        //layer: 'watercolor'
                    })
                }),

              new ol.layer.Tile({
                  title: 'Mapbox light',
                  type: 'base',
                  visible: false,
                  source: new ol.source.XYZ({
                  // url: 'http://ift.tt/2rghtdF',//street
                  url: 'http://ift.tt/2rPzzAj', //light
                   })
                }),

            new ol.layer.Tile({
                  title: 'Mapbox Dark',
                  type: 'base',
                  visible: false,
                  source: new ol.source.XYZ({
                   url: 'http://ift.tt/2rg8tFA',//street

                   })
                }),

            new ol.layer.Tile({
                  title: 'Mapbox streets',
                  type: 'base',
                  visible: false,
                  source: new ol.source.XYZ({
                   url: 'http://ift.tt/2rghtdF',//street

                   })
                }),
                 ]
        }),localgroup],

        target: 'map',
        view: new ol.View({
        center: ol.proj.transform([72.99591,19.07364], 'EPSG:4326', 'EPSG:3857'),
        zoom:9,
        minZoom:8,
        maxZoom:30
    })
});
var layerSwitcher = new ol.control.LayerSwitcher({
    tipLabel: 'Légende' // Optional label for button
});
**function bindInputs(layerid, layer) {
    var visibilityInput = $(layerid + ' input.visible');
    visibilityInput.on('change', function() {
      layer.setVisible(this.checked);
    });
    visibilityInput.prop('checked', layer.getVisible());
    var opacityInput = $(layerid + ' input.opacity');

   opacityInput.on('input change', function() {
      layer.setOpacity(parseFloat(this.value));
    });
    opacityInput.val(String(layer.getOpacity()));
  }
 map.getLayers().forEach(function(layer, i) {
    bindInputs('#layer' + i, layer);
    if (layer instanceof ol.layer.Group) {
      layer.getLayers().forEach(function(sublayer, j) {
        bindInputs('#layer' + i + j, sublayer);
      });
    }
  });**
map.addControl(layerSwitcher);
})();

Thanks.