循环并验证多个无线电输入 [英] Loop through and validate multiple radio inputs
问题描述
function validateForm() {
var radios = document.getElementsByName("Dquestion[1]");
var formValid = false;
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
if (!formValid) alert("Must check some option!");
return formValid;
}
PHP:
PHP:
<form name="form1" action="#" onsubmit="return validateForm()" method="post">
First time visitor?:<br/>
<label for="s1">Yes</label>
<?php for($i=1; $i<=10; $i++){?><td><input type="radio" name="Dquestion[1]" value="<?=$i?>"> <?=$i?> </td><?php } ?>
<br/>
<label for="s2">No</label>
<?php for($i=1; $i<=10; $i++){?><td><input type="radio" name="Iquestion[1]" value="<?=$i?>"> <?=$i?> </td><?php } ?>
<br/>
<label for="s3">cool</label>
<?php for($i=1; $i<=10; $i++){?><td><input type="radio" name="Dquestion[2]" value="<?=$i?>"> <?=$i?> </td><?php } ?>
<br/>
<input type="submit" value="Submit"><br/>
</form>
我的意图是检查所有输入,如果没有,他们就无法提交表格。每个问题我有10个无线电输入,表格有25个问题,因此我对每个名称使用 Dquestion ['number']
。我正在使用此代码进行测试,但无法检查 Dquestion [2]
。为什么?我将如何循环所有25个问题?
My intention is to make all inputs checked, and if not, they can't submit the form. I have 10 radio inputs for each question, and the form has 25 questions, so I use Dquestion['number']
for each name. I am using this code to test but the Dquestion[2]
can't be checked. Why? How am I going to loop all 25 questions?
我尝试了这段代码,但它不起作用:
I tried this code, but it didn't work:
var Dnames = ['Dquestion[1]','Dquestion[2]']
function validateForm() {
var radios = [];
var formValid = false;
for (var i = 1; i<= Dnames.length; i++){
var radios = document.getElementsByName(Dnames[i]);
var j = 0;
while(!formValid && j < radios.length){
if(radios[j].checked) formValid = true;
j++
}
}
if (!formValid) alert("Must check some option!");
return formValid;
}
推荐答案
我会把每一套包裹起来与div周围的特定问题有关的单选按钮,并检查每个div以查看是否至少检查了一个单选按钮。
I would wrap each set of radio buttons pertaining to a particular question around a div and check each div to see if at least one radio button is checked.
<form id="form1" name="form1" action="#" method="post" onsubmit="return validateForm();">
<p>First time visitor?:</p>
<div class="question">
<label for="s1">Yes</label>
<?php for($i=1; $i<=10; $i++){?><input type="radio" value="<?=$i?>"> <?=$i?> <?php } ?>
</div>
<br/>
<div class="question">
<label for="s2">No</label>
<?php for($i=1; $i<=10; $i++){?><input type="radio" value="<?=$i?>"> <?=$i?> <?php } ?>
</div>
<br/>
<div class="question">
<label for="s3">Cool</label>
<?php for($i=1; $i<=10; $i++){?><input type="radio" value="<?=$i?>"> <?=$i?> <?php } ?>
</div>
<br/>
<input type="submit" value="Submit"><br/>
</form>
JS:
JS:
function validateForm() {
var questions = document.getElementsByClassName("question"),
formValid = true;
for( var j=0; j<questions.length; j++ ) {
if( !isOneInputChecked(questions[j], "radio") ) {
formValid = false;
}
}
alert(formValid ? "Submission Succesfull!" : "Submission Failed!");
return formValid;
}
function isOneInputChecked(sel) {
// All <input> tags...
var inputs = sel.getElementsByTagName('input');
for (var k=0; k<inputs.length; k++) {
// If you have more than one radio group, also check the name attribute
// for the one you want as in && chx[i].name == 'choose'
// Return true from the function on first match of a checked item
if( inputs[k].checked )
return true;
}
// End of the loop, return false
return false;
}
JSFiddle:
这是一个有效的 JSFiddle 供参考。
isOneInputChecked()
从Michael Berkowski的回复中获取的函数在另一个帖子中(链接)。
isOneInputChecked()
function taken from Michael Berkowski's reply in a different thread (link).
这篇关于循环并验证多个无线电输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!