检查是否选中了HTML复选框

Question

我使用HTML和JavaScript创建了一个简单的HTML网站，该网站根据用户选择的属性来推荐歌曲。 我已完成所有工作，但是，例如，在下图中，第二个“ else-if”语句和最后一个“ else-if”语句最终返回了第二个“ else-if”语句的歌曲标题。 在最后一个语句中，它将返回第二个“ else-if”语句中的歌曲标题。 似乎它忽略the band[0].checked最后一个“ else-if”语句条件the band[0].checked部分。 我不确定为什么只是忽略了声明条件的那一部分？ 我这部分的代码如下：

由于我上面提到的问题，除最后两个“ else-if”语句外，其他所有操作均应按预期进行。

var genre = document.getElementById("songGenre").value;
var bandList = document.getElementsByName("bandList");
var band = document.getElementsByName("band");

if (genre == "Rock" && bandList[0].checked && band[1].checked && band[2].checked) {
  alert("Our song suggestion: Tip the Scales");
}

else if (genre == "Rock" && bandList[0].checked && band[1].checked && band[3].checked) {
  alert("Our song suggestion: Savior");
}

else if (genre == "Rock" && bandList[0].checked && band[0].checked && band[2].checked) {
  alert("Our song suggestion: Hero of War");
}

else if (genre == "Rock" && bandList[0].checked && band[0].checked && band[3].checked) {
  alert("Our song suggestion: Swing Life Away");
}

else if (genre == "Rock" && bandList[0].checked && band[0].checked && band[1].checked && band[2].checked) {
  alert("Our song suggestion: Entertainment");
}

else if (genre == "Rock" && bandList[0].checked && band[0].checked && band[1].checked && band[3].checked) {
  alert("Our song suggestion: Elective Amnesia");
}

Answer 1

发生这种情况是因为当条件：

(genre == "Rock" && bandList[0].checked && band[0].checked && band[1].checked && band[3].checked)

是真的，那么

(genre == "Rock" && bandList[0].checked && band[1].checked && band[3].checked)

也是如此。

但是，由于您正在使用elseif，它将在第二种情况下停止，并且不会继续检查线路。

为了解决此问题，您需要更改elseif块的顺序，并将最具体的块放在顶部，而将更通用的块放在底部。 换句话说，将较长的复杂if放在顶部，将简单的简短if放在底部。

一旦从特定->简单修复了订单，您将看到您的应用程序按预期运行。