One checkbox to toggle all won't recognize the one I click

Question

So, ive made one togglebox that has function to toggle all others when it is ticked/unticked. The problem is when i for example:

1.togglebox [ticked]
2.checkbox [ticked] --> show image
3.checkbox [ticked] --> show image
4.checkbox [ticked] --> show image

But when i click for example on checkbox number 3 to hide image, like this:

1.togglebox [ticked]
2.checkbox [ticked] --> show image
3.checkbox [unticked] --> hide image
4.checkbox [ticked] --> show image

And when i now click on togglebox to hide all images, the checkbox number 3 stays unticked but still shows image.

1.togglebox [unticked]
2.checkbox [unticked] --> hide image
3.checkbox [unticked] --> show image
4.checkbox [unticked] --> hide image

From that point it is bugged, when i again click on togglebox, the next thing happens:

1.togglebox [ticked]
2.checkbox [ticked] --> show image
3.checkbox [ticked] --> hide image
4.checkbox [ticked] --> show image

I hope this is explained very well. Here is my code for that specific part that is only important in my opinion:

<html>
<head>
    <title>Old School - Mapa</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="gmaps-sidebar.css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="sidebar" class="sidebar collapsed">
    <div class="sidebar-tabs">
        <ul role="tablist">
            <li><a href="#mapa" role="tab">&zwnj;<i class="fa fa-plus"></i></a></li>
        </ul>
        <ul role="tablist">
            <li><a href="https://oldschool-samp.com/" title="Nazad na portal">&zwnj;<i class="fa fa-home"></i></a></li>
        </ul>
    </div>
    <div class="sidebar-content">
        <div class="sidebar-pane" id="mapa">
            <h1 class="sidebar-header">Vazna Mesta<span class="sidebar-close">&zwnj;<i class="fa fa-caret-left"></i></span>
            </h1>
            <span style="overflow-y: scroll;">
            <!--<p><input onclick="removeMarker0('cn')" type="checkbox"></input>  PRIKAZI SVE</p>-->
            <p><input type="Button" onclick="removeMarker0('cb')" value="Toggle all" /></p>
            <p><input id="removeMarker1" type="checkbox" name="cb" checked></input> <img src="images/icon74.png"> Vazna mesta</p>
            <p><input id="removeMarker2" type="checkbox" name="cb" checked></input> <img src="images/icon65.png"> Poslovi</p>
            <p><input id="removeMarker3" type="checkbox" name="cb" checked></input> <img src="images/icon75.png"> Organizacije</p>
            <p><input id="removeMarker4" type="checkbox" name="cb" checked></input> <img src="images/icon114.png"> Grafiti</p>
            <p><input id="removeMarker5" type="checkbox" name="cb" checked></input> <img src="images/icon70.png"> Farme</p>
            <p><input id="removeMarker6" type="checkbox" name="cb" checked></input> <img src="images/icon80.png"> Apartmani</p>
            <p><input id="removeMarker7" type="checkbox" name="cb" checked></input> <img src="images/icon64.png"> Elektrane</p>
            <p><input id="removeMarker8" type="checkbox" name="cb" checked></input> <img src="images/icon93.png"> Vozila</p>
            <p><input id="removeMarker9" type="checkbox" name="cb" checked></input> <img src="images/icon96.png"> Ostalo</p>
            </span>
        </div>
    </div>
</div>
<!-- The container the map is rendered in -->
<div id="map-canvas" class="sidebar-map"></div>

<!-- Load all javascript -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery-sidebar.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&key=YOUR_API_KEY"></script>
<script src="js/SanMap.js"></script>
<script>
    /*
     * Define the map types we will be using.
     *
     * SanMapType parameters: minZoom, maxZoom, getTileUrlFunction, [optional]tileSize.
     *
     * The default value for tileSize is 512.
     */
     
    var mapType = new SanMapType(1, 3, function (zoom, x, y) {
        return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/map." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
    });
    
    var satType = new SanMapType(1, 3, function (zoom, x, y) {
        return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/sat." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
    });

    /*var map2Type = new SanMapType(1, 3, function (zoom, x, y) {
        return x == -1 && y == -1
        ? "tiles/map.outer.png" 
        : "tiles/map." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
    });*/
    
    /*
     * Create the map.
     *
     * createMap parameters: canvas, mapTypes, [optional]defaultZoomLevel, 
     *     [optional]defaultLocation, [optional]allowRepeating, [optional]defaultMapType.
     *
     * The default value for defaultZoomLevel is 2.
     * The default value for defaultLocation is null.
     * The default value for allowRepeating is false.
     * The default value for defaultMapType is the first key in mapTypes.
     */
    var map = SanMap.createMap(document.getElementById('map-canvas'), 
        {'Original': mapType, 'Satelit': satType}, 1, null, false, 'Original');
        
    var locations1 = [ // Vazna mesta
        ["Opstina BG", 1480.9915,-1770.5961, 'images/icon74.png'],
        ["Opstina SA", 2388.3662,2465.9727, 'images/icon74.png'],
        ["Opstina ZG", -2765.1287,375.5398, 'images/icon74.png'],
        ["Banka BG", 1431.9195,-1027.1347, 'images/icon91.png'],
        ["Banka SA", 2374.1128,2168.5459, 'images/icon91.png'],
        ["Banka ZG", -1754.1587,963.8221, 'images/icon91.png'],
        ["Zlatara BG", 2805.1757,-1111.2426, 'images/icon66.png'],
        ["Zlatara SA", 2369.9749,2121.0371, 'images/icon66.png'],
        ["Zlatara ZG", -2455.6675,503.9778, 'images/icon66.png'],
        ["Posta BG", 598.0868,-1262.2319, 'images/icon88.png']
    ];
    
    var locations2 = [ // Poslovi
        ["Mehanicar", 2236.2380,-1919.1660, 'images/icon65.png'],
        ["Vozac Autobusa", 1482.2886,-2346.0857, 'images/icon65.png'],
        ["Brodski Carinik", -1499.7024,1276.8247, 'images/icon65.png'],
        ["Dostavljac Produkta", 2423.4402,-2090.1006, 'images/icon65.png'],
        ["Pizza Dostavljac", 2101.3145,-1806.5291, 'images/icon65.png'],
        ["Vozac Nafte", 913.8230,-1234.7288, 'images/icon65.png'],
        ["Diler Droge", -539.9569,-506.4546, 'images/icon65.png'],
        ["Krijumcar Droge", -553.3698,-506.4476, 'images/icon65.png'],
        ["Krijumucar Materijala", 204.6846,-236.3555, 'images/icon65.png'],
        ["Nelegalni Farmer", -52.7285,62.1289, 'images/icon65.png'],
        ["Proizvodjac Oruzja", 2173.2466,-2264.3735, 'images/icon65.png'],
        ["Pilot", 1510.4951,-2473.4622, 'images/icon65.png'],
        ["Post Express", 2381.9409,-2072.9895, 'images/icon65.png'],
        ["Poljoprivrednik", -1060.1761,-1195.4727, 'images/icon65.png'],
        ["Bankar", 1503.6530,-1206.1367, 'images/icon65.png'],
        ["Cementar", 2442.5496,1954.6122, 'images/icon65.png'],
        ["Cvecar", -1109.6187,-1667.7958, 'images/icon65.png'],
        ["Ribar", 713.0135,-1828.4298, 'images/icon65.png'],
        ["Djubretar", 754.3393,-1363.8527, 'images/icon65.png'],
        ["Svercer Oruzja", -50.6831,-232.5801, 'images/icon65.png'],
        ["Rudar", 816.7617,856.7667, 'images/icon65.png'],
        ["Konobar", 1215.7332,-1668.1177, 'images/icon65.png'],
        ["Arheolog", 1381.4640,-1088.7904, 'images/icon65.png'],
        ["Proizvodjac Namestaja", -1829.5977,66.3077, 'images/icon65.png']
    ];
    
    var locations3 = [ // Organizacije
        ["Policija BG", 1565.7868,-1697.7216, 'images/icon75.png'],
        ["Policija SA", 2286.2303,2437.6926, 'images/icon75.png'],
        ["Policija ZG", -1625.7031,712.1304, 'images/icon75.png'],
        ["SAJ", 1504.3945,-1475.7064, 'images/icon75.png'],
        ["Bolnicari", 1172.3673,-1340.1966, 'images/icon76.png'],
        ["Ministarstvo", 1684.8906,-1343.3948, 'images/icon74.png'],
        ["Taxi Kompanija", 1784.1796,-1900.1623, 'images/icon104.png'],
        ["Parking Servis", 1115.6683,-923.4268, 'images/icon99.png'],
        ["Novinari", 1798.8281,-1305.7137, 'images/icon103.png'],
        ["Nacionalna Garda", 2620.6054,-2377.1846, 'images/icon75.png'],
        ["La Cosa Nostra", 1124.6676,-2051.0656, 'images/icon85.png'],
        ["La Familia Sinatra", 1272.2994,-812.3728, 'images/icon85.png'],
        ["Triada", 2841.9250,-1573.2844, 'images/icon85.png'],
        ["Jamaican-British Yardies", 700.5066,-1291.7614, 'images/icon85.png'],
        ["Mara Salvatrucha 13", 2599.9006,-1057.6295, 'images/icon85.png'],
        ["Ballas", 2506.9329,-1514.3146, 'images/icon85.png'],
        ["Groove Street Families", 2486.7020,-1691.2144, 'images/icon85.png'],
        ["Los Surenos", 1823.0072,-2042.1636, 'images/icon85.png'],
        ["PO 1", 1212.5551,-1046.6394, 'images/icon85.png'],
        ["PO 2", 924.4304,-1720.5339, 'images/icon85.png'],
        ["Saobracajna Policija", 1798.3875,-1578.3270, 'images/icon75.png']
    ];
    
    var locations4 = [ // Grafiti
        ["Grafit 1", 1910.7731,-1678.7028, 'images/icon114.png'],
        ["Grafit 2", 1028.9070,-1343.1971, 'images/icon114.png'],
        ["Grafit 3", 1768.1693,-2203.8113, 'images/icon114.png'],
        ["Grafit 4", 1701.5748,-1208.7198, 'images/icon114.png'],
        ["Grafit 5", 2291.1030,-1111.2173, 'images/icon114.png'],
        ["Grafit 6", 654.5261,-1386.1083, 'images/icon114.png'],
        ["Grafit 7", 1995.8987,-1359.8507, 'images/icon114.png'],
        ["Grafit 8", 529.5560,-1738.8977, 'images/icon114.png'],
        ["Grafit 9", 1126.0731,-1765.3927, 'images/icon114.png'],
        ["Grafit 10", 1638.7294,-1909.6046, 'images/icon114.png']
    ];
    
    var locations5 = [ // Farme
        ["Farma 1", -222.3576,-1312.3114, 'images/icon70.png'],
        ["Farma 2", -223.8554,-1357.9336, 'images/icon70.png'],
        ["Farma 3", -223.6008,-1411.5653, 'images/icon70.png'],
        ["Farma 4", -260.7890,-1409.6561, 'images/icon70.png'],
        ["Farma 5", -260.9689,-1358.5756, 'images/icon70.png'],
        ["Farma 6", 195.8360,219.7414, 'images/icon70.png'],
        ["Farma 7", 254.3003,219.5323, 'images/icon70.png'],
        ["Farma 8", 288.8247,219.4157, 'images/icon70.png'],
        ["Farma 9", 300.2164,204.5857, 'images/icon70.png'],
        ["Farma 10", 243.0082,204.4290, 'images/icon70.png'],
        ["Farma 11", -294.5258,-624.5650, 'images/icon70.png'],
        ["Farma 12", -294.5131,-589.8402, 'images/icon70.png'],
        ["Farma 13", -294.2415,-521.0508, 'images/icon70.png'],
        ["Farma 14", -315.9028,-531.7070, 'images/icon70.png'],
        ["Farma 15", -315.7494,-566.9977, 'images/icon70.png']
    ];
    
    var locations6 = [ // Apartmani
        ["Belgrade Waterfront", 940.6454,-2425.0608, 'images/icon80.png'],
        ["Aqua Beach", 2923.3789,-1587.5837, 'images/icon80.png'],
        ["Times Square Apartments", 1415.6083,-1701.8799, 'images/icon80.png'],
        ["Vavilon Tower", 287.7304,-1617.0875, 'images/icon80.png'],
        ["Crowne Plaza Tower", 1168.9989,-1200.4218, 'images/icon80.png'],
        ["Seaside Apartments", 105.2891,-1645.3148, 'images/icon80.png'],
        ["Penthouse", 1582.2784,-1285.1016, 'images/icon80.png']
    ];
    
    var locations7 = [ // Elektrane
        ["Gradska elektrana BG", 1546.6699,-1270.4622, 'images/icon64.png'],
        ["Gradska elektrana SA", 1043.4347,1011.7299, 'images/icon64.png'],
        ["Gradska Elektrana ZG", -2521.1597,-624.4224, 'images/icon64.png'],
        ["Prva Seoska Elektrana", -136.0787,1139.4178, 'images/icon64.png'],
        ["Druga Seoska Elektrana", 2308.9204,-49.3520, 'images/icon64.png'],
        ["Treca Seoska Elektrana", 211.0028,-231.1066, 'images/icon64.png'],
        ["Cetvrta Seoska Elektrana", 703.3870,-515.3524, 'images/icon64.png'],
        ["Peta Seoska Elektrana", -2145.3215,-2281.4961, 'images/icon64.png'],
        ["Sesta Seoska Elektrana", -2253.5364,2331.9780, 'images/icon64.png']
    ];
    
    var locations8 = [ // Vozila
        ["Glavna Auto Pijaca", 1637.5444,-1145.3386, 'images/icon93.png'],
        ["Auto Pijaca Grotti", 542.7584,-1299.7221, 'images/icon93.png'],
        ["Auto Skola", 2046.8922,-1908.0786, 'images/icon92.png'],
        ["Tuning BG ClassicCars", 1041.3623,-1030.2128, 'images/icon68.png'],
        ["Tuning BG OldTimers", 2644.6619,-2034.8193, 'images/icon68.png'],
        ["Tuning ZG SuperCars", -2712.5786,217.4365, 'images/icon68.png'],
        ["Tehnicki Pregled BG", 2876.5918,-1935.8575, 'images/icon67.png'],
        ["Tehnicki Pregled SA", 1449.4249,649.3497, 'images/icon67.png'],
        ["Tehnicki Pregled ZG", -1548.8516,514.8412, 'images/icon67.png'],
        ["Registracija I Tablice BG", 1570.0568,-1334.2224, 'images/icon86.png'],
        ["Registracija I Tablice SA", 2447.2439,2376.1829, 'images/icon86.png'],
        ["Registracija I Tablice ZG", -1641.8368,1203.6748, 'images/icon86.png']
    ];
    
    var locations9 = [ // Ostalo
        ["Casino", 2043.4570,1918.1044, 'images/icon89.png'],
        ["Burg", 1215.7954,-923.9620, 'images/icon96.png'],
        ["Aerodrom", 1581.0444,-2331.8564, 'images/icon81.png'],
        ["AFK Zona", 1419.8475,-1623.7520, 'images/icon98.png'],
        ["Kupovina Alata", -497.0915,-196.8161, 'images/icon84.png'],
        ["Javni WC", 1288.7877,-1653.7588, 'images/icon107.png'],
        ["Cvecara", 1135.0272,-1673.4751, 'images/icon106.png'],
        ["Bazen", 2318.8476,-1449.9394, 'images/icon69.png'],
        ["Trajekt BG", 835.9167,-2064.0049, 'images/icon79.png'],
        ["Trajekt SA", 2293.9099,556.5950, 'images/icon79.png'],
        ["Trajekt ZG", -1425.6282,1007.0730, 'images/icon79.png'],
        ["Hram", 1776.8554,-1785.7571, 'images/icon94.png'],
        ["Dzamija", 1657.6333,1796.5240, 'images/icon95.png'],
        ["Narodni Muzej", 1381.8429,-1088.7617, 'images/icon108.png'],
        ["Pekara", 1684.5703,-1480.7160, 'images/icon97.png'],
        ["Ribarnica", 483.9151,-1771.9888, 'images/icon78.png'],
        ["Seoska Kafana", 1360.3123,207.0251, 'images/icon82.png'],
        ["Kopaonik", -2314.5076,-1648.7323, 'images/icon72.png'],
        ["Gunshop", 1791.4235,-1164.7052, 'images/icon87.png'],
        ["Restoran U Centru Grada", 1498.4025,-1582.4191, 'images/icon82.png'],
        ["Kafana Slozna Braca", 681.5953,-473.5649, 'images/icon82.png'],
        ["Rent A Car", 1207.5375,-1751.4326, 'images/icon77.png'],
        ["Prodavnica Automobila", 2131.7727,-1150.2969, 'images/icon93.png'],
        ["Telekom", 1328.5034,-1557.8286, 'images/icon77.png'],
        ["Pay And Spray", 915.4384,-2308.5449, 'images/icon77.png'],
        ["House Upgrade", 2351.2202,-1411.9762, 'images/icon71.png'],
        ["Oglasi", 1740.9958,-1280.0453, 'images/icon101.png'],
        ["Hiper Market", 1206.0508,-1459.4910, 'images/icon83.png'],
        ["Teretana", 2239.2928,-1734.6946, 'images/icon110.png'],
        ["Karting", 2281.9087,-2364.4048, 'images/icon105.png'],
        ["Mobile Shop", 915.7721,-918.5951, 'images/icon102.png'],
        ["Trafika", 1167.7717,-2482.7285, 'images/icon77.png'],
        ["Kladionica", 1167.7717,-2482.7285, 'images/icon109.png'],
        ["Trajekt", 1110.1292,-1797.0547, 'images/icon77.png'],
        ["Komunalije", 1653.9485,-1656.8314, 'images/icon77.png'],
        ["Vodovod", 1219.3358,-1812.7955, 'images/icon77.png'],
        ["Kupovina Alata", 1158.1499,-1769.5849, 'images/icon77.png'],
        ["Binco", 2244.1406,-1696.1451, 'images/icon111.png'],
        ["CU Shop 030", 1296.8784,-1436.7538, 'images/icon100.png'],
        ["Enterijer Shop", 1400.0894,-1200.8570, 'images/icon71.png'],
        ["Metro BG", 1310.1804,-1367.9152, 'images/icon83.png'],
        ["Metro SA", 2834.4893,2386.5996, 'images/icon83.png'],
        ["Lotto BG", 1220.0964,-1436.2670, 'images/icon90.png'],
        ["Lotto SA", 2150.9998,1837.6965, 'images/icon90.png'],
        ["Lotto ZG", -2699.3984,-5.0133, 'images/icon90.png'],
        ["Ammu-Nation BG", 1380.2692,-1294.1645, 'images/icon87.png'],
        ["Ammu-Nation SA", 2177.6460,961.9283, 'images/icon87.png'],
        ["Ammu-Nation ZG", -2626.5923,209.5155, 'images/icon87.png'],
        ["Teritorija 1", 1036.6007,-372.9872, 'images/icon112.png'],
        ["Teritorija 2", 2365.3489,-1758.9768, 'images/icon112.png'],
        ["Teritorija 3", 2581.4844,-2096.8455, 'images/icon112.png'],
        ["Teritorija 4", -1868.0782,1660.4165, 'images/icon112.png'],
        ["HiTech BG Govornica 1", 1770.7937,-1376.9139, 'images/icon73.png'],
        ["HiTech BG Govornica 2", 2405.1567,-1230.2621, 'images/icon73.png'],
        ["HiTech BG Govornica 3", 826.5919,-1348.6880, 'images/icon73.png'],
        ["HiTech SA Govornica 1", 1707.8926,1462.9923, 'images/icon73.png'],
        ["HiTech SA Govornica 2", 2218.2378,1269.7927, 'images/icon73.png'],
        ["HiTech SA Govornica 3", 2833.4995,2402.2090, 'images/icon73.png'],
        ["HiTech ZG Govornica 1", -2654.4041,599.2096, 'images/icon73.png'],
        ["HiTech ZG Govornica 2", -1967.3436,162.3144, 'images/icon73.png'],
        ["HiTech ZG Govornica 3", -1917.6848,655.9781, 'images/icon73.png'],
        ["Magacin Za Mafije", -2943.0845,-1307.7000, 'images/icon113.png'],
        ["Magacin Za Bande", -2946.9055,-1514.0350, 'images/icon113.png'],
        ["DM Zona", 1023.2475,-1123.4602, 'images/icon116.png'],
        ["Osiguravajuce Drustvo", 474.9359,-1524.3483, 'images/icon115.png'],
        ["Biro Za Zaposljavanje", 1399.7456,-1573.3299, 'images/icon118.png'],
        ["Korzo", 1309.0437,-1153.3778, 'images/icon117.png']
    ];
    
    var markers = [];
    var loca0 = []; // markers object from group 0
    var loca1 = []; // markers object from group 1
    var loca2 = []; // markers object from group 2
    
    // loop for creation of markers in each group
    for (var i=0; i<locations1.length; i++){
        loca1.push(placeMarker(locations1[i])); // Marker pushed in group 1
    }
    for (var i=0; i < locations2.length; i++) { 
        loca2.push(placeMarker(locations2[i])); // Marker pushed in group 2
    }

//------------------------------------------------------------------------------------------------
    function placeMarker(loc){
        var latLng = SanMap.getLatLngFromPos(loc[1], loc[2]);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            optimized: true,
            icon: loc[3]
        });
        
        markers.push(marker);
        
        /*$('#removeMarker0').click(function(event) { // Remove group 1 marker
                if(this.checked){
                    marker.setVisible(true); 
                }else{
                    marker.setVisible(false);
                }
        });*/
        
        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
            infowindow.open(map, marker);
        });
        
        map.addListener('click', function() { if(infowindow) infowindow.close(); });
        return marker;
    }
    
var isAllCheck = true;
    function removeMarker0(cn){
        var cbarray = document.getElementsByName(cn);
              if(this.checked){
                    for(var i = 0; i < cbarray.length; i++){ cbarray[i].checked = isAllCheck; }
                    for (i = 0; i < markers.length; i++) {
                          if (markers[i].getMap() != null) markers[i].setMap(null);
                else markers[i].setMap(map);
                    }
              }else{
                    for(var i = 0; i < cbarray.length; i++){ cbarray[i].checked = !isAllCheck; }
                    for (i = 0; i < markers.length; i++) {
                          if (markers[i].getMap() != null) markers[i].setMap(null);
                          else markers[i].setMap(map);
                    }
              }
              isAllCheck = !isAllCheck;
        }
        

function removeMarkers(e){
    for(let i=0; i<e.data.markers.length; i++){
        if(this.checked){
            if(e.data.markers[i].getMap() == null){
                e.data.markers[i].setMap(map);
            }
            }
        else{
            if(e.data.markers[i].getMap() != null){
                e.data.markers[i].setMap(null);
            }
        }
    }
}

// then set it
$('#removeMarker1').click({markers: loca1}, removeMarkers);
$('#removeMarker2').click({markers: loca2}, removeMarkers);

        


    google.maps.event.addListener(map, 'dblclick', function(event) {
        var pos = SanMap.getPosFromLatLng(event.latLng);
        alert(pos.x + "," + pos.y);
    });
    
    var sidebar = $('#sidebar').sidebar();
</script>
</body>

could you please add the declaration of `loca1`, `loca2` and `markers`? — Nikita Skrebets, Jan 06 '22 at 21:24
Please provide a [mcve] that demonstrates the issue, including any HTML/CSS required, preferably a StackSnippet in the question itself. — geocodezip, Jan 06 '22 at 21:26
@Monk Thank you. But now it doesn't have `locations1`, `locations2` and `placeMarker` — Nikita Skrebets, Jan 06 '22 at 21:35
@Monk now I see it looks like not important. It would be great if we could see how it reproduces. Because id doesn't seem to reproduce here. BTW the code in `removeMarker1` in both cases of `if(this.checked){` is identical. Maybe this is the reason? — Nikita Skrebets, Jan 06 '22 at 21:47
@NikitaSkrebets if i understand corectly, i changed that to `if(removeMarker1.checked){` bust still the same. Its not the problem to put whole code to work, but i have my custom .js file and for some reason it wont load it to make the code work. — Monk, Jan 06 '22 at 21:50
@Monk I mean that if `this.checked === true` and if `this.checked === false`, the code does the same thing. Which means it does not care if the checkbox is checked or not. Which sounds like the problem you were asking about. I'll try to post it in an answer... — Nikita Skrebets, Jan 06 '22 at 21:55

PaulCrp · Answer 1 · 2022-01-06T23:10:39.313

1

the problem is that you execute the same code if your tooglebox is checked or not

$('#removeMarker1').click(function(event) {
    for(let i=0; i<loca1.length; i++){ 
        if(this.checked){
            // this 2 lines are the same...
            if (loca1[i].getMap() != null) loca1[i].setMap(null);
                else loca1[i].setMap(map);
        }else{
            // ... than this 2 lines
            if (loca1[i].getMap() != null) loca1[i].setMap(null);
                else loca1[i].setMap(map);
        }
    }
});

Possible solution

Write one function for all your listener (for more lisibility). In the next function you add the marker to your map if the toogleBox is checked and is not already visible. However, if the toogleBox is unchecked and the marker is visible, you hide it. Just pass the selected array of markers as parameters (more infos here).

function removeMarkers(e){
    for(let i=0; i<e.data.myArrayOfMarker.length; i++){
        if(this.checked){
            if(e.data.myArrayOfMarker[i].getMap() == null){
                e.data.myArrayOfMarker[i].setMap(map);
            }
        }
        else{
            if(e.data.myArrayOfMarker[i].getMap() != null){
                e.data.myArrayOfMarker[i].setMap(null);
            }
        }
    }
}

// then set it
$('#removeMarker1').click({myArrayOfMarker: loca1}, removeMarkers);
$('#removeMarker2').click({myArrayOfMarker: loca2}, removeMarkers);

edited Jan 06 '22 at 23:10

answered Jan 06 '22 at 22:01

PaulCrp

624
1
8
19

I can not make it to work. Replaced `markersArray[i]` with `markers[i]` because i have `markers.push(marker);` if im correct? And where to put those two last lines? – Monk Jan 06 '22 at 22:22
i edit my first post because i have an error and replace line let `markerArray = event.data.markerArray;` by `let markerArray = e.data.markerArray;`. – PaulCrp Jan 06 '22 at 22:27
The variable `markerArray` is the parameter pass to JQuery.click() function (see [**this**](https://stackoverflow.com/questions/3273350/jquerys-click-pass-parameters-to-user-function)). Is not related to `markers.push(marker);` . The 2 last lines and the function replace all your code under your comment `//THIS IS WHAT HAPPEN WHEN YOU TOGGLE CHECKBOXES (i said they are "images" for example)` – PaulCrp Jan 06 '22 at 22:33
Now, whatever i click `#removeMarker1` or `#removeMarker2`, everything gets removed. Maybe i need to implement something like `loca1[i]`, right? – Monk Jan 06 '22 at 22:39
I don't think so. I change the name of `markersArray` by `myArrayOfMarker` for more lisibility. try to past the new version without the markerArray variable – PaulCrp Jan 06 '22 at 22:48
Ok, updated. Now the site is not working to be able to test it. – Monk Jan 06 '22 at 22:52
EDITED again, there was one { missing from your code. Now its working. But still when i toggle one marker and then click on toggle all, that one marker disappear and other shows up, and when i click again toggle all, that one marker shows up, but the others disappear – Monk Jan 06 '22 at 23:07
The 2nd problem occurs in your `removeMarker0()` function i think. I suggest iterating in all of your group of markers if the group is toogle or not – PaulCrp Jan 07 '22 at 00:13
Thank you for your help, im not too good to figure how to do all that. Sorry for your time. – Monk Jan 07 '22 at 00:42

score 0 · Answer 2 · answered Jan 06 '22 at 21:56

Try this

$('#removeMarker1').click(function(event) {
            for(let i=0; i<loca1.length; i++){ 
                if(this.checked){
                    if (loca1[i].getMap() != null) loca1[i].setMap(null);
                        else loca1[i].setMap(map);
                }else{
                    if (loca1[i].getMap() != null) loca1[i].setMap(map);
                        else loca1[i].setMap(null);
                }
            }
        });
        
        $('#removeMarker2').click(function(event) {
            for(let i=0; i<loca2.length; i++){ 
                if(this.checked){
                    if (loca2[i].getMap() != null) loca2[i].setMap(null);
                        else loca2[i].setMap(map);
                }else{
                    if (loca2[i].getMap() != null) loca2[i].setMap(map);
                        else loca2[i].setMap(null); 
                }
            }
        });

Now i have to click twice on checkbox to get that displayed, and after that i get everything the same (first problem). — Monk, Jan 06 '22 at 22:03

One checkbox to toggle all won't recognize the one I click

2 Answers2

Possible solution

Linked