理解选中的单选按钮时遇到问题

Question

我正在尝试通过JavaScript验证我的表单，而不是手动检查每个单选按钮，我决定循环访问一组单选按钮并检查它们是否被选中。

我只是想看看是否选中了一组单选按钮。但我面临的问题是。当我检查它们中的任何一个时，它都会返回真和假。如果我也不检查，它们都返回 false，但如果我检查一个，它返回 true 和 false。

这是我的代码：

function validateForm(){
	let firstliGroup = document.getElementsByName("yesnocheck");
	for(i=0; i<firstliGroup.length; i++){
		//console.log(firstliGroup[i].checked);
		if(firstliGroup[i].checked == true){
			console.log('success');
			return true;
		}
		else {
			console.log('failed');
			return false;
		}
	}
}

<form name="driverkeylistform" method="post" onsubmit="return validateForm()">
	<fieldset id="group1">
		<input type="radio" name="yesnocheck" value="Yes"><span>Yes</span>
		<input type="radio" name="yesnocheck" value="No"><span>No</span>
	</fieldset>
    <input type="submit" value="Send">
</form>

Answer 1

试试这个：

function getRadioValue(name) {
    let elements = document.getElementsByName(name);
    for (let i = 0; i < elements.length; i++) {
        if (elements[i].checked) {
            return elements[i].value;
        }
    }
    return null;
}
function validateForm() {
    var yesnocheck = getRadioValue("yesnocheck");
    console.log(yesnocheck);
    return false;
}

如果未检查任何内容，则 getRadioValue 函数将返回 null。如果选中了任何选项，它将返回其值。

Answer 2

尝试使用 document.forms[0].yesnocheck .

function validateForm()
{
    return (document.forms[0].yesnocheck.value.length  > 0 &&
            document.forms[0].yesnoremote.value.length > 0 &&
            document.forms[0].yesnocable.value.length  > 0 &&
            document.forms[0].condition.value.length   > 0);
}

<form name="driverkeylistform" method="post" onsubmit="return validateForm()">
	<fieldset id="group1">
		<input type="radio" name="yesnocheck" value="Yes"><span>Yes</span>
		<input type="radio" name="yesnocheck" value="No"><span>No</span>
	</fieldset>
		<label for="gateremote">Gate remote batteries checked?:</label>
		<input type="radio" name="yesnoremote" value="Yes"><span>Yes</span>
		<input type="radio" name="yesnoremote" value="No"><span>No</span>
		<label for="internetcabletv">Internet and Cable TV checked?:</label>
		<input type="radio" name="yesnocable" value="Yes"><span>Yes</span>
		<input type="radio" name="yesnocable" value="No"><span>No</span>
		<label for="unitcondition">Unit Condition?:</label>
		<input type="radio" name="condition" value="clean"><span>Clean</span>
		<input type="radio" name="condition" value="light"><span>Light</span>
		<input type="radio" name="condition" value="heavy"><span>Heavy</span>
		<input type="radio" name="condition" value="superheavy"><span>SuperHeavy</span>
    
    <input type="submit" value="Send">
</form>