HTMLチェックボックスがオンになっているかどうかを確認する

Question

ユーザーが選択した属性に基づいてソングを提案するHTMLとJavaScriptを使用して簡単なHTML Webサイトを作成しました。しかし、たとえば、以下の画像では、2番目の "else-if"ステートメントと最後の "else-if"ステートメントは、2番目の "else-if"ステートメントの曲名を返すようになります。最後のステートメントでは、2番目の "else-if"ステートメントにある曲のタイトルが返されます。それは最後の "else-if"ステートメントの条件の一部を無視しているようです。なぜ私は文の条件の一部を無視しているのか分かりません。この部分のコードは次のとおりです。

上記の問題のために最後の2つの "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を使用しているため、2番目の条件で停止し、行のチェックを続行しません。

これを修正するには、elseifブロックの順序を変更し、最も特定のものを上に、より一般的なものを下に配置する必要があります。言い換えれば、上部にある場合は長い複合体を配置し、下部には単純な短い複合体を配置します。

specific-> simpleの注文を修正すると、アプリケーションが期待どおりに動作するようになります。