Question

我有以下代码。这是一个测验，我想以一种用户必须尝试所有问题的方式验证测验表格。如果不回答所有问题，用户就无法继续提交。如果没有回答任何问题，应显示警告框。

我的代码如下

<form method="post" action="" name="quizform" id="quizform">

<h4> 1)This is first question</h4>
a) <input type="radio" name="a1" value="1" id="1" /><label for="1">Option 1</label><br />
b) <input type="radio" name="a1" value="2" id="2" /><label for="2">Option 1</label><br />
c) <input type="radio" name="a1" value="3" id="3" /><label for="3">Option 1</label><br />
d) <input type="radio" name="a1" value="4" id="4" /><label for="4">Option 1</label><br />

<h4> 2)This is first question</h4>
a) <input type="radio" name="a2" value="1" id="5" /><label for="5">Option 1</label><br />
b) <input type="radio" name="a2" value="2" id="6" /><label for="6">Option 1</label><br />
c) <input type="radio" name="a2" value="3" id="7" /><label for="7">Option 1</label><br />
d) <input type="radio" name="a2" value="4" id="8" /><label for="8">Option 1</label><br />

<h4> 3)This is first question</h4>
a) <input type="radio" name="a3" value="1" id="9" /><label for="9">Option 1</label><br />
b) <input type="radio" name="a3" value="2" id="10" /><label for="10">Option 1</label><br />
c) <input type="radio" name="a3" value="3" id="11" /><label for="11">Option 1</label><br />
d) <input type="radio" name="a3" value="4" id="12" /><label for="12">Option 1</label><br />

<h4> 4)This is first question</h4>
a) <input type="radio" name="a4" value="1" id="13" /><label for="13">Option 1</label><br />
b) <input type="radio" name="a4" value="2" id="14" /><label for="14">Option 1</label><br />
c) <input type="radio" name="a4" value="3" id="15" /><label for="15">Option 1</label><br />
d) <input type="radio" name="a4" value="4" id="16" /><label for="16">Option 1</label><br />
<input type="submit" onclick="formButtonFever('quizform','submit')" />

Answer 1

我发现这个例子我想回答你的问题

<script type="text/javascript">
function validateRadio( obj,correct ){
    var result = 0;
    for(var i=0; i<obj.length; i++){
        if(obj[i].checked==true && obj[i].value==correct){
            result = 1;
        }
    }
    if(!result && obj.value == correct){
        result = 1;
    }
    return result
}

function validateSubmit( obj ){
    var err = '';
    if( !validateRadio( obj.a,3 ) ){ err+='\nFirst radio is wrong'; }
    if( !validateRadio( obj.b,2 ) ){ err+='\nSecond radio is wrong'; }
    if( err.length ){ 
        alert('Problem:'+err); 
        return false; 
    }
    else{ 
        alert('Good Job -- Submitting'); 
        return true; 
    }
}
</script>
<form onsubmit="return validateSubmit(this);" action="#">


Choose "3"
<input type="radio" name="a" value="1" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 1
<input type="radio" name="a" value="2" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 2
<input type="radio" name="a" value="3" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 3
<input type="radio" name="a" value="4" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 4

<p>Choose "2"
<input type="radio" name="b" value="1"> 1
<input type="radio" name="b" value="2"> 2
<input type="radio" name="b" value="3"> 3
<input type="radio" name="b" value="4"> 4

</p><p><input type="submit" value="Submit">
</p></form>

参考：http://www.esqsoft.com/javascript/javascript-example-how-to-validate-radio-buttons.htm

Answer 2

    hope this will help you

    <script LANGUAGE="JavaScript">
    function formButtonFever(form){
    ErrorText= "";
    if ( ( form.a1[0].checked == false ) && ( form.a1[1].checked == false ) && (  
    form.a1[2].checked == false )&& ( form.a1[3].checked == false )) 
    {
    alert ( "Please answer for 1st question" ); 
    return false;
    }

    if ( ( form.a2[0].checked == false ) && ( form.a2[1].checked == false ) && (     
    form.a2[2].checked == false )&& ( form.a2[3].checked == false )) 
     {
     alert ( "Please answer for 2nd question" ); 
     return false;
     }

     if ( ( form.a3[0].checked == false ) && ( form.a3[1].checked == false ) && (  
     form.a3[2].checked == false )&& ( form.a3[3].checked == false )) 
     {
      alert ( "Please answer for 3rd question" ); 
     return false;
       }


      if ( ( form.a4[0].checked == false ) && ( form.a4[1].checked == false ) && ( 
      form.a4[2].checked == false )&& ( form.a4[3].checked == false )) 
      {
      alert ( "Please answer for 4th question" ); 
      return false;
      }




      if (ErrorText= "") { form.submit() }
       }
       </script>



       <form method="post" action="" name="quizform" id="quizform">

                    //your code

       <input type="submit" onclick="return formButtonFever(this.form)" />
       </body>
       </html>

Answer 3

一种方法是迭代表单的元素集合，并检查每个单选按钮组是否至少有一个已检查：

function checkRadios(form) {

  // All elements in the form
  var elements = form.elements,
      visited = {},
      name,
      node,
      result = true;

  // Loop over elements looking for raido button groups
  for (var i=0, iLen=elements.length; i<iLen; i++) {
    node = elements[i];
    name = node.name;

    // Store whether one radio in the group is checked
    if (node.type == 'radio') {
      visited[name] = node.checked || !!visited[name];
    }
  }

  // Deal with unchecked radios
  for (name in visited) {
    if (visited.hasOwnProperty(name) && !visited[name]) {
      console.log(name + ' has not been checked');
      result = false;
    }
  }

  // Return false if one group not checked
  return result;
}

您还应在表单中包含重置按钮：

<form onsubmit="return checkRadios(this);">
Choose "3"
<input type="radio" name="a" value="1"> 1
<input type="radio" name="a" value="2"> 2
<input type="radio" name="a" value="3"> 3
<input type="radio" name="a" value="4"> 4
<br>
Choose "2"
<input type="radio" name="b" value="1"> 1
<input type="radio" name="b" value="2"> 2
<input type="radio" name="b" value="3"> 3
<input type="radio" name="b" value="4"> 4
<br>
<input type="submit" value="Submit"><input type="reset">
</form>

Answer 4

另一个答案。首先，您应为每个class提供radio button，name a1 拥有class a1 ，{{1} } a2 有name a2 等等......然后

试试这个..

class

使用javascript验证具有不同名称的多个radiobox

4 个答案: