檢查是否選中了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放在底部。

一旦從特定->簡單修復了訂單，您將看到您的應用程序按預期運行。