多個複選框驗證 - 不會識別

Question

我有一個表單，其中有些問題需要一些，有些則不需要，這不是問題。

下面是一個代碼，當'用戶'點擊「提交」並且沒有'〜12'複選框被'檢查'時，它會'提醒''必須被選擇'的用戶。但是，如果選中1個或多個ARE，它仍會顯示相同的「Alert」，表示需要選擇複選框。

驗證方法：

function validateForm() 
{ 
    ////Multiple Check Box validation///////////////// 

    var chks = document.getElementsByName("HealthConditions"); 
    var checkCount = 0; 
    for (var i = 0; i < chks.length; i++) 
    { 
     if (chks[i].checked) 
     { 
      checkCount++; 
     } 
    } 
    if (checkCount < 1) 
    { 
     alert("Please select at least one current health condition."); 
     return false; 
    } 

    return true; 
} 

身體：

<form id="inshealthform" name="inshealthform" method="post" action="inshealthform_process.php" onsubmit="return validateForm()"> 

    <input id="HealthConditions"type="checkbox" name="HealthNoConditions" value="No Conditions" tabindex= "22"/> 
      No conditions</td> 
     <td width="38%" sizcache="3" sizset="11"> 
    <input id="HealthConditions" type="checkbox" name="HealthAlcohol" value="Alcohol/Substance Abuse" tabindex= "23"/> 
     Alcohol/Substance Abuse</td> 
     <td width="32%" sizcache="3" sizset="12"> 
    <input id="HealthConditions" type="checkbox" name="HealthAlzheimers" value="Alzheimer's Disease" tabindex= "24"/> 
      Alzheimer's Disease</td> 
     </tr> 

等等等等等等。

「提交按鈕」

Answer 1

你的DOM查詢尋找其中一個屬性 - 顯然 - 不存在（HealthConditions）。

嘗試這樣：

function validateForm() { 

    var chks = document.querySelectorAll('input[type=checkbox]'); 
    var checkCount = 0; 

    for (var i = 0; i < chks.length; i++) { 
     console.log(chks[i].checked) 
     if (chks[i].checked) { 
      checkCount++; 
     } 
    } 

    if (checkCount < 1) { 
     alert("Please select at least one current health condition."); 
     return false; 
    } 

    return true; 
} 

Fiddle

此外，HTML元素ID必須是唯一的。