Appearing content on unchecked checkbox

so I've got a little problem with my checkbox. I'm trying to have my points not visible when the checkbox is unchecked when the website is loaded. The checkbox is unchecked but the content(points) still appear.

css:

.leaflet-marker-pane,   
.leaflet-marker-pane-green,
.leaflet-marker-pane-yellow,
.leaflet-marker-pane-red,
.leaflet-marker-pane-blue   {
     display: none;
}

html doesnt need any changes,

javascript:

L.geoJson(greenGeo, {
    onEachFeature: onEachFeature, 
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {icon: greenIcon});
    },
    style: function(feature) {
        return {color: "#559900"};
    },
}).addTo(that.nmgOpenStreetMap);

In leaflet.js there is a function already made for that, className: ''; but it doesn't work for me. I've also tried .addClass('.leaflet-marker-pane-green'); (<-- green example). The .addClass does work, but not properly, it gives me errors. Maybe I put it not where it supposed to be? Would anyone be kind enough to help me? :) Thank you a lot!