檢查每個單選按鈕是否被檢查的JavaScript？

Question

你好我是JavaScript新手，所以我需要一點幫助。

我有這個簡單的HTML表單與單選按鈕。有20個問題，每個問題都必須回答，所以我需要一些驗證形式來檢查每個問題是否在訪問者點擊提交按鈕之前得到解答？ （檢查單選按鈕是否被選中）

提前致謝。

<form action="rezultatiFU.php" method="post"> 


<ol> 


<li> 
    <h3>Koji ste pol?</h3> 

    <div> 
    <input type='radio' name='answer1' id='answer1' value='A' /> 
    <label for='answer1A'>Muško</label> 
    </div> 

    <div> 
    <input type='radio' name='answer1' id='answer1' value='B' /> 
    <label for='answer1B'>Žensko</label> 
    </div> 
    </li> 

    <li> 
    <h3>Koliko imate godina?</h3> 

    <div> 
    <input type='radio' name='answer2' id='answer2' value='A' /> 
    <label for='answer2A'>18-25</label> 
    </div> 

    <div> 
    <input type='radio' name='answer2' id='answer2' value='B' /> 
    <label for='answer2B'>25-35</label> 
    </div> 

    <div> 
    <input type='radio' name='answer2' id='answer2' value='C' /> 
    <label for='answer2C'>35-45</label> 

    </div> 
    <div> 
    <input type='radio' name='answer2' id='answer2' value='D' /> 
    <label for='answer2D'><45</label> 
    </li> 



    <li> 
    <h3>Koliko ste visoki? (cm)</h3> 

    <div> 
    <input type='text' name='answer3' id='answer3' /> 
    </div> 
    </li> 



    <li> 
    <h3>Koliko imate kilograma?</h3> 
    <div> 
    <input type='text' name='answer4' id='answer4' /> 
    </div> 
    </li> 


    <li> 
    <h3>Da li Vaš posao zahteva kretanje ili neku fizičku aktivnost?</h3> 

    <div> 
    <input type='radio' name='answer5' id='answer5' value='A' /> 
    <label for='answer5A'>Da</label> 
    </div> 

    <div> 
    <input type='radio' name='answer5' id='answer5' value='B' /> 
    <label for='answer5B'>Ne</label> 
    </div> 
    </li> 


    <li> 
    <h3>Da li ste dijabetičar?</h3> 

    <div> 
    <input type='radio' name='answer6' id='answer6' value='A' /> 
    <label for='answer6A'>Da</label> 
    </div> 

    <div> 
    <input type='radio' name='answer6' id='answer6' value='B' /> 
    <label for='answer6B'>Ne</label> 
    </div> 
    </li> 


<li> 
    <h3>Koliko tečnosti unosite tokom dana?</h3> 

    <div> 
    <input type='radio' name='answer7' id='answer7' value='A' /> 
    <label for='answer7A'>Ispod 2 litre</label> 
    </div> 

    <div> 
    <input type='radio' name='answer7' id='answer7' value='B' /> 
    <label for='answer7B'>2 litre</label> 
    </div> 
    <div> 
    <input type='radio' name='answer7' id='answer7' value='C' /> 
    <label for='answer7C'>Preko 2 litre</label> 
    </div> 
    </li> 

    <li> 
    <h3>Da li doručkujete?</h3> 

    <div> 
    <input type='radio' name='answer8' id='answer8' value='A' /> 
    <label for='answer8A'>Da</label> 
    </div> 

    <div> 
    <input type='radio' name='answer8' id='answer8' value='B' /> 
    <label for='answer8B'>Ne</label> 
    </div> 
    <div> 
    <input type='radio' name='answer8' id='answer8' value='C' /> 
    <label for='answer8C'>Ponekad, kada stignem</label> 
    </div> 
    </li> 



    <li> 
    <h3>Koliko često se bavite fizičkom aktivnošću?</h3> 

    <div> 
    <input type='radio' name='answer9' id='answer9' value='A' /> 
    <label for='answer9A'>Skoro nikada</label> 
    </div> 

    <div> 
    <input type='radio' name='answer9' id='answer9' value='B' /> 
    <label for='answer9B'>Jednom nedeljno</label> 
    </div> 

    <div> 
    <input type='radio' name='answer9' id='answer9' value='C' /> 
    <label for='answer9C'>Više puta nedeljno</label> 
    </div> 

    <div> 
    <input type='radio' name='answer9' id='answer9' value='D' /> 
    <label for='answer9D'>Svaki dan</label> 
    </div> 

    </li> 



    <li> 
    <h3>Koliko obroka imate tokom dana?</h3> 

    <div> 
    <input type='radio' name='answer10' id='answer10' value='A' /> 
    <label for='answer10A'>1-2</label> 
    </div> 

    <div> 
    <input type='radio' name='answer10' id='answer10' value='B' /> 
    <label for='answer10B'>3</label> 
    </div> 


    <div> 
    <input type='radio' name='answer10' id='answer10' value='C' /> 
    <label for='answer10C'>5 i više</label> 
    </div> 
    </li> 


    <li> 
    <h3>Da li konzumirate hranu sa velikim udelom masti?</h3> 

    <div> 
    <input type='radio' name='answer11' id='answer11' value='A' /> 
    <label for='answer11A'>Da</label> 
    </div> 

    <div> 
    <input type='radio' name='answer11' id='answer11' value='B' /> 
    <label for='answer11B'>Izbegavam masnu hranu</label> 
    </div> 
    <div> 
    <input type='radio' name='answer11' id='answer11' value='C' /> 
    <label for='answer11C'>Ponekad</label> 
    </div> 
    </li> 

    <li> 
    <h3>Da li konzumirate hranu sa velikim količinama šećera? (slatkiši, sokovi sa šećerom i sl.)</h3> 

    <div> 
    <input type='radio' name='answer12' id='answer12' value='A' /> 
    <label for='answer12A'>Da, uživam u takvoj hrani</label> 
    </div> 

    <div> 
    <input type='radio' name='answer12' id='answer12' value='B' /> 
    <label for='answer12B'>Ne, izbegavam kad god mogu</label> 
    </div> 

    <div> 
    <input type='radio' name='answer12' id='answer12' value='C' /> 
    <label for='answer12C'>Ponekad</label> 
    </div> 
    </li> 


     <li> 
    <h3>Koliko često jedete voće i povrće?</h3> 

    <div> 
    <input type='radio' name='answer13' id='answer13' value='A' /> 
    <label for='answer13A'>Svaki dan</label> 
    </div> 

    <div> 
    <input type='radio' name='answer13' id='answer13' value='B' /> 
    <label for='answer13B'>Retko</label> 
    </div> 
    </li> 


     <li> 
    <h3>Koliko kalorija unesete tokom dana? (odprilike)?</h3> 

    <div> 
    <input type='radio' name='answer14' id='answer14' value='A' /> 
    <label for='answer14A'>Nedovoljno</label> 
    </div> 

    <div> 
    <input type='radio' name='answer14' id='answer14' value='B' /> 
    <label for='answer14B'>Dovoljno</label> 
    </div> 
    <div> 
    <input type='radio' name='answer14' id='answer14' value='C' /> 
    <label for='answer14C'>Previše</label> 
    </div> 
    </li> 

     <li> 
    <h3>Koliko često konzumirate alkohol?</h3> 

    <div> 
    <input type='radio' name='answer15' id='answer15' value='A' /> 
    <label for='answer15A'>Jednom nedeljno</label> 
    </div> 

    <div> 
    <input type='radio' name='answer15' id='answer15' value='B' /> 
    <label for='answer15B'>Više puta nedeljno</label> 
    </div> 
    <div> 
    <input type='radio' name='answer15' id='answer15' value='C' /> 
    <label for='answer15C'>Jednom mesečno</label> 
    </div> 
    <div> 
    <input type='radio' name='answer15' id='answer15' value='D' /> 
    <label for='answer15D'>Nikada ili jako retko</label> 
    </div> 
    </li> 



    <li> 
    <h3>Koliko često konzumirate hranu iz FastFood restorana?</h3> 

    <div> 
    <input type='radio' name='answer16' id='answer16' value='A' /> 
    <label for='answer16A'>Svaki dan</label> 
    </div> 

    <div> 
    <input type='radio' name='answer16' id='answer16' value='B' /> 
    <label for='answer16B'>Svaki drugi dan</label> 
    </div> 
    <div> 
    <input type='radio' name='answer16' id='answer16' value='C' /> 
    <label for='answer16C'>Jednom nedeljno</label> 
    </div> 
    <div> 
    <input type='radio' name='answer16' id='answer16' value='D' /> 
    <label for='answer16D'>Ne jedem u Fast Food restoranima</label> 
    </div> 
    </li> 



    <li> 
    <h3>Koliko često jedete pečenu hranu?</h3> 

    <div> 
    <input type='radio' name='answer17' id='answer17' value='A' /> 
    <label for='answer17A'>Svaki dan</label> 
    </div> 

    <div> 
    <input type='radio' name='answer17' id='answer17' value='B' /> 
    <label for='answer17B'>Svaki drugi dan</label> 
    </div> 
    <div> 
    <input type='radio' name='answer17' id='answer17' value='C' /> 
    <label for='answer17C'>Jednom nedeljno</label> 
    </div> 
    <div> 
    <input type='radio' name='answer17' id='answer17' value='D' /> 
    <label for='answer17D'>Ne jedem pečenu hranu</label> 
    </div> 
    </li> 




    <li> 
    <h3>Kada ogladnite a nije vreme za obrok, šta pojedete?</h3> 

    <div> 
    <input type='radio' name='answer18' id='answer18' value='A' /> 
    <label for='answer18A'>Čips</label> 
    </div> 

    <div> 
    <input type='radio' name='answer18' id='answer18' value='B' /> 
    <label for='answer18B'>Kokice</label> 
    </div> 
    <div> 
    <input type='radio' name='answer18' id='answer18' value='C' /> 
    <label for='answer18C'>Semenke, kikiriki, lešnik, badem</label> 
    </div> 
    <div> 
    <input type='radio' name='answer18' id='answer18' value='D' /> 
    <label for='answer18D'>Slatkiše</label> 
    </div> 
    <div> 
    <input type='radio' name='answer18' id='answer18' value='E' /> 
    <label for='answer18E'>Voće</label> 
    </div> 
    <div> 
    <input type='radio' name='answer18' id='answer18' value='F' /> 
    <label for='answer18F'>Popijem tečnost i čekam da pregladnim</label> 
    </div> 
    </li> 

    <li> 
    <h3>Da li jedete i kada niste gladni?</h3> 

    <div> 
    <input type='radio' name='answer19' id='answer19' value='A' /> 
    <label for='answer19A'>Da</label> 
    </div> 

    <div> 
    <input type='radio' name='answer19' id='answer19' value='B' /> 
    <label for='answer19B'>Ne</label> 
    </div> 
    </li> 



    <li> 
    <h3>Okarakterišite sebe?</h3> 

    <div> 
    <input type='radio' name='answer20' id='answer20' value='A' /> 
    <label for='answer20A'>Optimista</label> 
    </div> 

    <div> 
    <input type='radio' name='answer20' id='answer20' value='B' /> 
    <label for='answer20B'>Pesimista</label> 
    </div> 
    </li> 


    <br/> 
    <input type="image" src="http://www.programtreninga.com/slike/dugmetest.png" alt="Submit Form" width="110" /> 

    <p><strong>* Napomena: morate odgovoriti na sva pitanja kako biste dobili tačan rezultat!</strong></p> 
</ol> 


</form> 

Answer 1

最簡單的方法是這樣的：

if(document.querySelectorAll("input[type=radio]:checked").length < 20) { 
    alert("You didn't answer all the questions"); 
    return false; 
} 

Answer 2

您可以驗證也使用jquery。

var names = {}; 
$('input:radio').each(function() { 
     names[$(this).attr('name')] = true; 
}); 
var count = 0; 
$.each(names, function() { 
     count++; 
}); 
if($('input:radio:checked').length == count) { 
     // all questions answered 
}