Overlay map in checkbox only shows with first base

The Overlay map in the checkbox only works on click of the first base map in the control layer, I can see the attribution when I am on the second base map, but not the map itself. I am working with leaflet seems rather strange.............................................................................................

  var googleearth = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    minZoom : 6,
    maxZoom: 17,
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
  });
  
  
  

  
  var googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
  });


  
  var map = L.map("mapid", {
    zoom: 10,
    center: [55.7363, -6.1771],
    layers: [ googleearth, googleTerrain],
    zoomControl: false,
    attributionControl: true,
    measureControl: true

  }); 


  
  var baseLayers = {
       "Aerial Imagery": googleearth,
       "googleTerrain":googleTerrain
  };

 L.control.layers(baseLayers,null,{collapsed:false}).addTo(map);

 var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
    maxZoom: 17,
    visibility: true,
    attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
  });
  
  
$(document).ready(function(){
    $("#layercontrol2").change(function(){
        if($(this).prop("checked")){ 
    OpenTopoMap.addTo(map);
    return;
  }else {
  
    OpenTopoMap.remove();

    return;

    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <style></style>
</head>

<body>
  <div id="mapid" style="height: 180px"></div>
 	  <div id="layercontrol">
    <input id="layercontrol2" type="checkbox" /> Topo Map
    <br />
    <!--input id="layercontrol3" type="checkbox" /> Satellite
    <br /-->
  </div>
</body>

</html>

The Leaflet Layers Control automatically manages the z-index of the layers you pass to it, if you let the autoZIndex option to true (default value):

If true, the control will assign zIndexes in increasing order to all of its layers so that the order is preserved when switching them on/off.

So your 2 Tile Layers googleearth and googleTerrain have a z-index of 1 and 2 respectively.

Now your 3rd Tile Layer (OpenTopoMap, the one you try to manage externally with your own checkbox) has only a z-index of 1 (default value), so it will be underneath the googleTerrain one.

The solution is simply to specify a high z-index value for your 3rd Tile Layer OpenTopoMap.

You could also turn the autoZIndex to false, so that all your Tile Layers have the default z-index value of 1, in which case the last added Tile Layer appears on top.

var googleearth = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
  minZoom: 6,
  maxZoom: 17,
  attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});

// Note: replacing the Tile Server to comply with Google Maps Terms.
var googleTerrain = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var map = L.map("mapid", {
  zoom: 10,
  center: [55.7363, -6.1771],
  layers: [googleearth, googleTerrain],
  zoomControl: false,
  attributionControl: true,
  measureControl: true

});

var baseLayers = {
  "Aerial Imagery": googleearth,
  "googleTerrain": googleTerrain
};

L.control.layers(baseLayers, null, {
  collapsed: false,
  //autoZIndex: false,
}).addTo(map);

var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
  zIndex: 100, // Make sure you specify a high enough value.
  maxZoom: 17,
  visibility: true,
  attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});


$(document).ready(function() {
  $("#layercontrol2").change(function() {
    if ($(this).prop("checked")) {
      OpenTopoMap.addTo(map);
      return;
    } else {

      OpenTopoMap.remove();

      return;

    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <style></style>
</head>

<body>
  <div id="mapid" style="height: 160px"></div>
  <div id="layercontrol">
    <input id="layercontrol2" type="checkbox" /> Topo Map
    <br />
    <!--input id="layercontrol3" type="checkbox" /> Satellite
    <br /-->
  </div>
</body>

</html>