检查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块的顺序，并把最具体的一个放在最上面，最通用的放在最下面。换句话说，如果在顶部放置较长的复合体，并在底部放置较短的复合体。

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