2017-10-06 87 views
0

我想通過JavaScript驗證我的表單,而不是手動檢查每個單選按鈕,我決定通過一組單選按鈕進行循環,並檢查是否檢查了它們。理解選中的單選按鈕

我只是想看看是否有一組單選按鈕被選中。但我面臨的問題是。當我檢查其中任何一個時,它都會返回true和false。如果我沒有檢查,他們都返回false,但如果我檢查一個,它返回true和false。

這裏是我的代碼:

function validateForm(){ 
 
\t let firstliGroup = document.getElementsByName("yesnocheck"); 
 

 
\t for(i=0; i<firstliGroup.length; i++){ 
 
\t \t //console.log(firstliGroup[i].checked); 
 
\t \t if(firstliGroup[i].checked == true){ 
 
\t \t \t console.log('success'); 
 
\t \t \t return true; 
 
\t \t } 
 
\t \t else { 
 
\t \t \t console.log('failed'); 
 
\t \t \t return false; 
 
\t \t } 
 
\t } 
 
}
<form name="driverkeylistform" method="post" onsubmit="return validateForm()"> 
 
\t <fieldset id="group1"> 
 
\t \t <input type="radio" name="yesnocheck" value="Yes"><span>Yes</span> 
 
\t \t <input type="radio" name="yesnocheck" value="No"><span>No</span> 
 
\t </fieldset> 
 
    <input type="submit" value="Send"> 
 
</form>

+0

如果選擇「是」,表單將提交....我不確定你面臨什麼問題.... – NewToJS

+0

1秒鐘讓我檢查一些真正快速的東西。 – Curious13

+0

好像在控制檯中顯示「true」,然後提交表單。我會按照您在運行時提供的代碼片段進行操作,而且我只從第一組單選按鈕中進行選擇,因爲這些是您的JavaScript定位的唯一選項。其餘的都不相關。 – NewToJS

回答

2

試試這個:

function getRadioValue(name) { 

    let elements = document.getElementsByName(name); 
    for (let i = 0; i < elements.length; i++) { 
     if (elements[i].checked) { 
      return elements[i].value; 
     } 
    } 

    return null; 

} 

function validateForm() { 

    var yesnocheck = getRadioValue("yesnocheck"); 
    console.log(yesnocheck); 

    return false; 

} 

如果沒有被選中,然後getRadioValue函數將返回null。 如果有任何選項被選中,它將返回它的值。

+0

這就是我一直在尋找的。謝謝! – Curious13

0

嘗試使用document.forms[0].yesnocheck

function validateForm() 
 
{ 
 
    return (document.forms[0].yesnocheck.value.length > 0 && 
 
      document.forms[0].yesnoremote.value.length > 0 && 
 
      document.forms[0].yesnocable.value.length > 0 && 
 
      document.forms[0].condition.value.length > 0); 
 
}
<form name="driverkeylistform" method="post" onsubmit="return validateForm()"> 
 
\t <fieldset id="group1"> 
 
\t \t <input type="radio" name="yesnocheck" value="Yes"><span>Yes</span> 
 
\t \t <input type="radio" name="yesnocheck" value="No"><span>No</span> 
 
\t </fieldset> 
 
\t \t <label for="gateremote">Gate remote batteries checked?:</label> 
 
\t \t <input type="radio" name="yesnoremote" value="Yes"><span>Yes</span> 
 
\t \t <input type="radio" name="yesnoremote" value="No"><span>No</span> 
 

 
\t \t <label for="internetcabletv">Internet and Cable TV checked?:</label> 
 
\t \t <input type="radio" name="yesnocable" value="Yes"><span>Yes</span> 
 
\t \t <input type="radio" name="yesnocable" value="No"><span>No</span> 
 

 
\t \t <label for="unitcondition">Unit Condition?:</label> 
 
\t \t <input type="radio" name="condition" value="clean"><span>Clean</span> 
 
\t \t <input type="radio" name="condition" value="light"><span>Light</span> 
 
\t \t <input type="radio" name="condition" value="heavy"><span>Heavy</span> 
 
\t \t <input type="radio" name="condition" value="superheavy"><span>SuperHeavy</span> 
 
    
 
    <input type="submit" value="Send"> 
 
</form>