Load large GeoJson files on demand on a leaflet map (checkboxes)

I have heavy Geojson files to display on a leaflet map. Because they are heavy, I would like them to be loaded only if the user checks a specific box on the map related to each of these Geojson files.

On below example, there is a checkbox below the map and one which is on the map. Basically, I would like to merge both and have all checkboxes on the map.

Here is my basic configuration :

HTML :

<div id="mapid"></div>

<form id="" method="post" action="">
    {% csrf_token %}
        <div>
            <input type="checkbox" id="gares" name="scales">
                <label for="scales">Gares</label>
            </div>
            <div>
                <input type="checkbox" id="voies" name="horns">
                <label for="horns">Voies</label>
            </div>
        </form>

JS :

const mymap = L.map('mapid').setView([48.01, 5.88], 8);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.xxxxxxx', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
    }).addTo(mymap);

I already implemented a control layer on the map to modify tiles on demand :

var osmUrl1 = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
    var osmUrl2 = 'http://c.tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png';
    var natural = L.tileLayer(osmUrl1, {id: 'MapID', attribution: '1'});
    var reliefs = L.tileLayer(osmUrl2, {id: 'MapID', attribution: '2'});
    var mixed = {
        "Espaces naturels": natural, // BaseMaps
        "Reliefs": reliefs,         // BaseMaps    
    };
    L.control.layers(null, mixed).addTo(mymap);

I managed to load the big GeoJson files asynchronously when the user checks a box which is below the map. How can I have these boxes toegther with the boxes which are on the map ?

$(document).ready(function () {

    function AddToMyMap(map, datalink, typeofdata, iconlink) {
        var newvar = L.geoJson(false, {
            style: myStyle,
        })
            .addTo(mymap);

        $.getJSON(datalink, function (data) {
            newvar.addData(data);
        });
    }

    $('input[type=checkbox]').change(
        function () {
            if ($(this).is(':checked')) {
                console.log('checked');
                typeofdata = $(this)[0].id;
                if (typeofdata === "gares") {
                    datalink = "{% static 'crisismode/sncffiles/referentiel-gares-voyageurs.geojson' %}";
                    iconlink = "{% static 'crisismode/images/clipart-railwaystation.png' %}";

                } else if (typeofdata === "voies") {
                    datalink = "{% static 'crisismode/sncffiles/fichier-de-formes-des-voies-du-reseau-ferre-national.geojson' %}";
                    iconlink = ""
                } else {
                    datalink = ""
                }
                AddToMyMap(mymap, datalink, typeofdata, iconlink);

            } else {
                console.log('unchecked');
                console.log($(this)[0].id);
            }
        }
    );
);

Thanks a lot for your help !!