JavaScript中的HTML复选框打开/关闭检测

时间:2018-09-02 10:04:36

标签: javascript html checkbox

我已经进行了太阳系模拟,并且有一些“设置”,用户可以更改。我已经做到了,所以设置仅在按下保存按钮时更新。这可以正常工作,如果选中了一个框,则身体是隐藏的,但例如,我检查了汞并保存了更改,然后在我保存更改时也想检查金星,但金星被隐藏了,但水星再次出现了。我该如何做才能使水星保持隐藏状态,直到框未选中为止。

(请注意,复选框决定了是否应该隐藏行星,例如,当hideMer为true时,它将停止在画布上绘制汞)

我认为该问题适用的

代码:

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

    hideBodies = [hideMer, hideVen, hideEar, hideMar, hideJup, hideSat, hideUra, hideNep];
    drawSun();

    for (var i=0; i< xPosList.length; i++){
        leapfrog(i);
        if (hideBodies[i]==false){
            drawBody(i);
        } 
    }

}

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

    console.log(hideMer);
    alert(hideMer);
}

整个代码:https://jsfiddle.net/nczpod06/6/

1 个答案:

答案 0 :(得分:1)

在该功能中,为每个行星保存更改,我只是在检查时更改布尔值,而在未选中时更改布尔值。要解决此问题(例如针对汞),我需要添加非布尔逻辑运算符,然后它可以工作...例如:

new_list = []
for i in range(1, 13):
  # if i exists in month, append to new_list
  # else add total: 0 and append to new_list