JavaScript 单选按钮确认

Posted

技术标签:

【中文标题】JavaScript 单选按钮确认【英文标题】:JavaScript radio button confirmation 【发布时间】:2013-02-04 03:23:08 【问题描述】:

我正在尝试向现有函数添加一个函数或附加 javascript 以进行确认。单击提交按钮后,我将需要一个确认框,上面写着“您已选择(GCSE、A2 或 AS),这是否正确?”应该有一个取消按钮来返回表单或一个允许提交表单的 OK。

这是代码,我做了一些研究,上面说使用循环,我对此很陌生,所以我不知道该怎么做。

<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">

function validateForm() 
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") 
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;


if(msg=="")
return result;


alert(msg)
return result;



</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table  border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examnumber">Examination Number</td>
<td><input type="text" name="examnumber" /></td>
</tr>
<tr>
<td><input type="radio" id="examtype" name="examtype" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype"  /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" /> : AS<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>

【问题讨论】:

此代码运行良好或出现错误您遇到什么问题请解释一下。? 【参考方案1】:

像这样设置单选按钮的值:

<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />

然后在您的函数中使用此脚本来验证表单或使其成为一个函数并从您的函数 validateForm 中调用它:

var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) 
          if (inputs[i].checked) 
           checked = inputs[i];
           break;
   

if(checked==null)

    alert('Please choose an option');
    return false;

else
    return confirm('You have chosen '+checked.value+' is this correct?');

【讨论】:

否,-> -1,您的解决方案会消耗宝贵的 CPU 周期。找到选中的收音机后,您应该从for 循环中break 感谢您提及@Kira,已经更新了代码,但有一件事.. 当您只有 3-4 个单选按钮时,这与 CPU 周期无关,而是与约定有关。 确实如此。感谢您更新您的答案。【参考方案2】:
add this to your code#

    function confirmation() 

    for (var i=0; i < document.ExamEntry.examtype.length; i++)
       
       if (document.ExamEntry.examtype[i].checked)
          
            var answer = confirm(document.ExamEntry.examtype[i].value)

        if (answer)
            document.ExamEntry.examtype[i].checked = true;

        
        else
            document.ExamEntry.examtype[i].checked = false;

        
          
    

    

然后给你添加单选按钮的

( value="a2" )
( value="a1" )
( value="G1" )

并添加到您的单选按钮 (onclick="return Confirm();") 记得把这个放在你们所有人的单选按钮中 soz 如果这不起作用。

【讨论】:

以上是关于JavaScript 单选按钮确认的主要内容,如果未能解决你的问题,请参考以下文章

仅当用户选择特定单选按钮时,才在该对话框中显示确认/对话框并发送 POST 请求

javascript中的单选按钮验证

选择多个单选按钮(通过 jquery、javascript?)

如何从 Javascript 更改 HTML 单选按钮选择?

Javascript单选按钮组验证

当数据来自数据库时,如何一次只选择一个单选按钮并在javascript中取消选择其他单选按钮?