如何检查单选按钮是否被选中

Question

在回答这个问题之前，我说我对JavaScript的了解非常有限，我不是一名开发人员。我被要求帮助为我的公司建立一个价格计算器向导。

我从W3学校找到了一些代码(https://www.w3schools.com/howto/howto_js_form_steps.asp)创建一个表单，检查每个输入字段是否为空。我想更改代码，以检查是否已选择每组中的单选按钮。

我不知道如何更改这行代码

if (y[i].value == "")

以检查是否已选择单选按钮。

下面是我的一个无线电组和检查输入字段是否为空的脚本。

如果您想查看完整的代码，请访问上面的W3学校链接。

<div class="tab">Option 1:
<p><input type="radio" id="male" name="gender" value="male" oninput="this.className = ''"><label for="male">Male</label></p>
<p><input type="radio" id="female" name="gender" value="female" oninput="this.className = ''"><label for="female">Female</label></p>
</div>      
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}

Answer 1

检查所有单选按钮是否已检查：

const radioButtons = Array.from(document.querySelectorAll('input[type=radio]'));
function checkChecked(){
console.log(radioButtons.every(button => button.checked));
}
radioButtons.forEach(button => button.onchange = checkChecked);

<input type=radio />
<input type=radio />
<input type=radio />
<input type=radio />
<input type=radio />

LVL 2：检查所有组的单选按钮是否至少有一个已检查：

const groupNames = ['group1', 'group2', 'group3'];
const radioButtons = Array.from(document.querySelectorAll('input[type=radio]'));

function checkChecked(){
console.log(groupNames.every(group =>
document.querySelector(`input[name=${group}]:checked`)
));
}
radioButtons.forEach(button => button.onchange = checkChecked);

<input name="group1" type=radio />
<input name="group1" type=radio />
<input name="group1" type=radio />
<br/>
<input name="group2" type=radio />
<input name="group2" type=radio />
<br/>
<input name="group3" type=radio />
<input name="group3" type=radio />