HTML checkbox element not behaving as expected with JavaScript

I have made a solar system simulation and have some 'settings' which the user can change. I have made it so the settings only update when the save button is pressed. However which i press this save button multiple times in a row the check-boxes randomly check and uncheck not all of them do this and it appears to be completely ranom. I believe it is something to do with my JavaScript code which is below.

(note the check boxes decide whether a planet should be hidden or not so hideMer for example when true would stop drawing mercury onto the canvas)

code which i think the issue applies to:

function animate() {
    //clears canvas each new loop only if trajectory not wanted
    if (showPath==false){
        c.clearRect(-innerWidth/2,-innerHeight/2,innerWidth,innerHeight);
    }

    drawSun();

    for (var i=0; i< xPosList.length; i++){
        hideBodies = [hideMer, hideVen, hideEar, hideMar, hideJup, hideSat, hideUra, hideNep];
        leapfrog(i);
        if (hideBodies[i]==false){
            drawBody(i);
        } 
    }

}

function saveChanges() {
    showPath=(document.getElementById("showPath").value=="True");
    //Mercury
    if (hideMer == false){
        hideMer=document.getElementById("mer").checked = true;
    } else if (hideMer == true){
        hideMer=document.getElementById("mer").checked = false;
    }
    //Venus
    if (hideVen == false){
        hideVen=document.getElementById("ven").checked = true;
    } else if (hideVen == true){
        hideVen=document.getElementById("ven").checked = false;
    }
    //Earth
    if (hideEar == false){
        hideEar=document.getElementById("ear").checked = true;
    } else if (hideEar == true){
        hideEar=document.getElementById("ear").checked = false;
    }
    //Mars
    if (hideMar == false){
        hideMar=document.getElementById("mar").checked = true;
    } else if (hideMar == true){
        hideMar=document.getElementById("mar").checked = false;
    }
    //Jupiter
    if (hideJup == false){
        hideJup=document.getElementById("jup").checked = true;
    } else if (hideJup == true){
        hideJup=document.getElementById("jup").checked = false;
    }
    //Saturn
    if (hideSat == false){
        hideSat=document.getElementById("sat").checked = true;
    } else if (hidSat == true){
        hideSat=document.getElementById("sat").checked = false;
    }
    //Uranus
    if (hideUra == false){
        hideUra=document.getElementById("ura").checked = true;
    } else if (hideUra == true){
        hideUra=document.getElementById("ura").checked = false;
    }
    //Neptune
    if (hideNep == false){
        hideNep=document.getElementById("nep").checked = true;
    } else if (hideNep == true){
        hideNep=document.getElementById("nep").checked = false;
    }
}

whole code: https://jsfiddle.net/nczpod06/1/