环通并验证多个无线电输入

Loop through and validate multiple radio inputs

本文关键字：无线电 输入 验证      更新时间：2023-09-26

JS：

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：

<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 个问题？

我尝试了这段代码，但它不起作用：

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;
}

var radios = document.getElementsByName('Dquestion[1]'); // you understand this part
var checked = Array.prototype.some.call(radios, function(radio){
    return radio.checked;
});

假设我有一个数组：

var arr = [1,2,3,4,5,6];
arr.some(function(num){
 return boolean // meaning return something that is true or false like "return num < 3
});
//when it loops through it will return that boolean each time
// it'll return 1 < 3: true, 2 < 3: true 3 < 3: false, 4 < 3: false, 5 < 3: false, 6 < 3: false
//the some function after it's done looping is checking if some are true which is true it returned 3 trues
//so checked = true
if(checked){
    console.log('one is checked');
} else {
    console.log('please check one');
};
我会将与

特定问题相关的每组单选按钮包装在一个div 周围，并检查每个div 以查看是否至少选中了一个单选按钮。

.PHP：

<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：

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在不同线程中的回复（链接）。

相关文章：