One checkbox to toggle all wont recognize the one i click (gets confused)

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:

var isAllCheck = true;
    function removeMarker0(cn){
        var cbarray = document.getElementsByName(cn); //gets all checkobxes
              if(this.checked){ //checks if its clicked
                    for(var i = 0; i < cbarray.length; i++){ cbarray[i].checked = isAllCheck; } //if its clicked, it will toggle all others
                    for (i = 0; i < markers.length; i++) { //lets say this are the images
                          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;
        }


//THIS IS WHAT HAPPEN WHEN YOU TOGGLE CHECKBOXES (i said they are "images" for example)

  $('#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(null);
                        else loca1[i].setMap(map);
                }
            }
        });
        
        $('#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(null);
                        else loca2[i].setMap(map); 
                }
            }
        });

<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"> </p>
<p><input id="removeMarker2" type="checkbox" name="cb" checked></input> <img src="images/icon65.png"></p>