简体   繁体   English

重置单选按钮

[英]Resetting Radio Buttons

Here is a fiddle containing my code - http://jsfiddle.net/jamiepollard28/sDLV4/8/ 这是包含我的代码的小提琴-http: //jsfiddle.net/jamiepollard28/sDLV4/8/

I am trying to make my code reset the radio buttons only when the user clicks cancel on the alert box of validation for the radio buttons. 我试图使代码仅在用户单击单选按钮验证的警报框中的取消时重置单选按钮。

When you click submt containing the required data with a radio button selected a alert box will come up confirming or rejecting the choice, when i click cancel on that alert box i want the radio button selection to reset. 当您单击包含所需数据的submt并选中一个单选按钮时,将弹出一个确认或拒绝该选择的警报框,当我在该警报框中单击“取消”时,我希望重置单选按钮的选择。

Below is my code. 下面是我的代码。

<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.onload=function(){
window.validateForm=function() {
    var result = true;
    var msg = "";
    var focusname="";
    if (document.ExamEntry.name.value == "") {
        msg += "You must enter your name \n";
        focusname="name";
        //document.ExamEntry.name.focus();
        document.getElementById('name1').style.color = "red";
        //result = false;
    }
    if (document.ExamEntry.subject.value == "") {
        msg += "You must enter the subject \n";
       // document.ExamEntry.subject.focus();
        if (focusname=="")
        {
        focusname="subject";
        }
        document.getElementById('subject1').style.color = "red";
        //result = false;
    }
    var Number = document.ExamEntry.Exam_Number.value
    if (Number == "") {
        msg += "You must enter the exam Number \n";
        //document.ExamEntry.Exam_Number.focus();
        if (focusname=="")
        {
        focusname="Exam_Number";
        }
        document.getElementById('Exam_Number1').style.color = "red";
        //result = false;
    }else if (Number.length != 4) {
        msg += "You must enter at least Four Numbers in the Exam Number \n";
         if (focusname=="")
        {
        focusname="Exam_Number";
        }
        //document.ExamEntry.Exam_Number.focus();
        document.getElementById('Exam_Number1').style.color = "red";
        //result = false;
    }
else if (isNaN(Number)) {
        msg += "You must enter at least four numeric characters in the Exam Number feild \n";
     if (focusname=="")
        {
        focusname="Exam_Number";
        }   
    // document.ExamEntry.Exam_Number.focus();
        document.getElementById('Exam_Number1').style.color = "red";
        //result = false;
    }
    var valchecked = '';
    var len = document.getElementsByName('examtype').length;

    for (i = 0; i < len; i++) {

if ( document.ExamEntry.examtype[i].checked ) {

valchecked = document.ExamEntry.examtype[i].value;
 break;

}

}
    if (valchecked == '') {
        msg += "Select Exam Type";
        document.getElementById('Exam_Type').style.color = "red";
         if (focusname=="")
        {
        focusname="examtype_GCSE";
        }

    } 

    if (msg != ""){
        alert(msg)
        document.getElementById(focusname).focus();
        return false;
    }else{
        return confirm('You have chosen ' + valchecked + ' is this correct?');
    }

}
}//]]>  

</script>


</head>
<body>
  <h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name1">Name</td>
<td><input type="text" name="name"  id="name" /></td>
</tr>
<tr>
<td id="subject1">Subject</td>
<td><input type="text" name="subject" id="subject"/></td>
</tr>
<tr>
<td id="Exam_Number1">Exam Number</td>
<td><input type="text" name="Exam_Number" id="Exam_Number" ><font size="3">(Maximum characters: 4)</font> </td>
</tr>
<tr>

<table><form action="">
<td id="Exam_Type">Exam Type</td>
<tr><td><input type="radio" id="examtype_GCSE" name="examtype" value="GCSE" /> : GCSE<br /></tr>
<tr><td><input type="radio" id="examtype_AS" name="examtype" value="AS"/> : AS<br /></tr>
<tr><td><input type="radio" id="examtype_A2" name="examtype" value="A2" /> : A2<br /></tr>
<tr><td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>

</body>


</html>

You are simply returning the users choice, you need to first check it, if it is true return true for form submission else reset radio and return false, as follows: FIDDLE 您只是在返回用户选择,您需要首先检查它,如果为true,则为表单提交返回true,否则重置单选并返回false,如下所示: FIDDLE

    var ch=  confirm('You have chosen ' + valchecked + ' is this correct?');
    if(!ch){
        document.getElementById('examtype_'+valchecked).checked= false;
        return false; }
    else 
        return true;
   }

With an if loop you can solve the issue 使用if循环可以解决问题

try following code 尝试以下代码

if(confirm('You have chosen ' + valchecked + ' is this correct?')){
            return true;
        }
        else{           
            document.getElementById('examtype_'+valchecked).checked= false;         
            return false;
        }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM