[英]HTML checkbox on/off detection in JavaScript
我进行了太阳系模拟,并具有一些用户可以更改的“设置”。 我已经做到了,所以设置仅在按下保存按钮时更新。 这可以正常工作,并且如果选中了一个框,则主体是隐藏的,但是例如说,我检查了汞并保存了更改,然后在我保存更改时也想检查金星,但金星被隐藏了,但水星再次出现了。 我如何才能做到这一点,以便水星保持隐藏状态,直到将盒子打开。
(请注意,复选框决定是否应隐藏行星,例如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/
在功能保存每个行星的更改中,我仅在选中时更改布尔值,而在不选中时更改布尔值。 要解决此问题(例如针对汞),我需要添加非布尔逻辑运算符,然后它可以工作...例如:
//Mercury
if (document.getElementById("mer").checked && hideMer == false){
hideMer = true;
} else if (!(document.getElementById("mer").checked) && hideMer == true){
hideMer = false;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.