How to remove specific marker by type on leaflet?

I have a project that is making webgis to display data on a map and a check box to display data or hide that data.

I have finished making it with the google map version, but because it is paid, I look for the free version using leaflets.

But I have a problem with the check box on the leaflet, after unchecking, the marker does not disappear.

var date = new Date();
                var year = date.getFullYear();

                // Center of the map
                var center = [-1.1329372, 120.0350916];

                // Create the map
                var map = L.map('map').setView(center, 5);

                // Set up the Google Map Hybrib layer
                L.tileLayer('http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}', {
                        attribution: 'Map data @' + year + ' Google for Dinas Kebersihan Lingkungan Hidup dan Pertamanan',
                maxZoom: 18
                }).addTo(map);

                // Call JSON
                $(document).ready(function() {
                   getUsers();
                });

                // Format Icon Leaflet
                var customIcons = L.Icon.extend({});

                var merahIcon = new customIcons({iconUrl: 'merah.png'}),
                        biruIcon = new customIcons({iconUrl: 'biru.png'}),
                        kuningIcon = new customIcons({iconUrl: 'kuning.png'});

                var icons = {
                        merah: merahIcon,
                        biru: biruIcon,
                        kuning: kuningIcon
                }       

                // Marker Group
                var markerGroups = {
                "merah": [],
                "biru": [],
                "kuning": []
                };

                // Get Data
                function getUsers() {
                $.getJSON("json.php", function (data) {
                for (var i = 0; i < data.length; i++) {
                var location = new L.LatLng(data[i].latitude, data[i].longitude);
                var name = data[i].name;
                var description = data[i].description;
                var type = data[i].type;
                var marker = createMarker(location, name, description, type);
                }
                })
                }

                // Create Marker
                function createMarker(location, name, description, type) {
                        var content = "<b>" + name + "</b> <br/>" + description;
                        var marker = L.marker(
                                location,
                                {icon: icons[type]}
                        ).bindPopup(content).addTo(map);

                        if (!markerGroups[type]) markerGroups[type] = [];
                console.log(markerGroups[type]);
                markerGroups[type].push(marker);
                var html = "<b>" + name + "</b> <br/>" + address;

                return marker;
                }

                // Create Checkbox Button
                function toggleGroup(type) {
                        for (var i = 0; i < markerGroups[type].length; i++) {
                        var marker = markerGroups[type][i];
                        if (!marker.getVisible()) {
                marker.setVisible(true);
                        } else {
                marker.setVisible(false);
                        }
                }
                }

      #map {
                        height: 600px;
                }

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div class="map_wrap">
                <div class="siderbarmap">
                        <ul>
                    <input id="merahCheckbox" type="checkbox" onclick="toggleGroup('merah')" checked="checked" autocomplete="off"></input>
                    <label>Merah</label><br>
                    <input id="biruCheckbox" type="checkbox" onclick="toggleGroup('biru')" checked="checked" autocomplete="off"></input>
                    <label>Biru</label><br>
                    <input id="kuningCheckbox" type="checkbox" onclick="toggleGroup('kuning')" checked="checked" autocomplete="off"></input>
                    <label>Kuning</label><br>
                        </ul>
                </div>
                <div id="map"></div>
        </div>