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

Question

我正在为学校做一份人格测试，并希望在某个问题未回答时创建一个警报。

这是其中一种答案的示例（每个问题有四个答案）

<div class="choice"><label class="input"><input type="radio" name="colour" value="-1"/><span class="marked"></span></label><img src="images/2.jpg" alt="Gothic colour palette"></div> 

这是我的JavaScript代码：

var y = new Array(5);
y[0] = document.getElementsByName("color"):checked;
y[1] = document.getElementsByName("pattern"):checked;
y[2] = document.getElementsByName("store"):checked;
y[3] = document.getElementsByName("hat"):checked;
y[4] = document.getElementsByName("hair"):checked;

var i;
for (i=0; i < x.length; i++){
    if (y[i] == false){
        alert("You didn't answer all the questions!");
    }
}

我创建了一个数组来遍历所有的问题并检查是否每个问题都被回答了。我认为可以通过检查具有相同名称的所有元素来实现这一点，但似乎不起作用。

我不确定如何检查至少有一个答案被标记。

我会感激您的帮助，并在此提前感谢您！

- Kamila Jarek

Answer 1

var i;
for (i=0; i < x.length; i++){
    if (!y[i].checked){
        alert("You didn't answer all the questions!");
    }
}

- Patricio Vargas

---

谢谢，但这对我没用，我需要函数在复选框未被选中时指出工作。 - Kamila Jarek

@KamilaJarek 你用了 !y[i].checked 还是 y[i].checked？如果没用 !，试试加上它 !y[i].checked。 - Patricio Vargas

@PatricoVargas 是的，我确实尝试过这个，但这会破坏整个代码。 - Kamila Jarek

Answer 2

首先，注意document.getElementsByName返回一个集合。您需要循环遍历集合以检查每个按钮。以下是我会这样做的方式：

var nameList = ['color', 'pattern', 'store', 'hat', 'hair'];
for(var i = 0; i < nameList.length; i++) {
    var isOneSelected = false;
    var radioButtons = document.getElementsByName(nameList[i]);
    for(var j = 0; j < radioButtons.length; j++) {
        if(radioButtons[j].checked == true) {
            isOneSelected = true;
            break;
        }
    }
    if(!isOneSelected) {
        alert("You must provide an answer for " + nameList[i]);
        break;
    }
}

- TFrazee

Answer 3

问题出在这一行：

y[0] = document.getElementsByName("color")

因为document.getElementsByName函数返回具有指定名称（name属性的值）的文档中所有元素的集合，表示为NodeList对象。 NodeList对象表示节点的集合。可以通过索引号访问节点。索引从0开始。

var y = new Array(5);
y[0] = document.getElementsByName("colour")[0].checked;

var i;
for (i=0; i < 1; i++){
    if (y[i] == false){
        alert("You didn't answer all the questions!");
    }
}

<div class="choice"><label class="input"><input type="radio" name="colour" checked value="-1"/><span class="marked"></span></label><img src="images/2.jpg" alt="Gothic colour palette"></div>

另外，您还可以使用Array.from方法简化数组的创建。

y = Array.from(document.querySelectorAll('input[type=radio]')).map(elem => elem.checked);

- Mihai Alexandru-Ionut

---

有没有其他方法可以调用同一个问题中的所有元素？ - Kamila Jarek