檢查HTML複選框是否被選中

Question

我製作了一個簡單的HTML網站，使用HTML和JavaScript，根據用戶選擇的屬性建議歌曲。例如，在下圖中，第二個「else-if」語句和最後一個「else-if」語句最終返回第二個「else-if」語句的歌曲標題。在最後的聲明中，它將返回第二個「else-if」語句中的歌曲標題。它看起來像忽略了the band[0].checked最後一個「else-if」語句的部分條件。我不確定爲什麼它只是忽略聲明的那部分條件？我的代碼如下：

除了最後兩個「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塊的順序，並把最具體的一個放在最上面，最通用的放在最下面。換句話說，如果在頂部放置較長的複合體，並在底部放置較短的複合體。

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