JavaScript:如果未选择任何单选按钮，如何分配默认值

Question

在HTML表单中，名为color的单选按钮可能存在，也可能不存在。我想检查此单选按钮是否存在，或者如果存在，则未选择任何单选按钮，如果是，请分配默认值：

if (document.getElementsByName("color") === undefined){
color= "red";
}else{
color = document.querySelector('input[name="color"]:checked').value;
}

但是，无论单选按钮是否存在、是否被选中，代码总是转到"else"，然后抱怨"未捕获的类型错误：无法读取 null 的属性'值'"。

我做错了什么？

Answer 1

你不需要getElementsByName和querySelector混合：

复选框存在时的代码段

var color = 'red';
var check = document.querySelector('input[name="color"]:checked');
if (check) color = check.value;
console.log(color);

<input type="checkbox" name="color" value="Hello!" checked>

复选框不存在时的代码段

var color = 'red';
var check = document.querySelector('input[name="color"]:checked');
if (check) color = check.value;
console.log(color);

下拉列表存在时的代码段

var color = 'red';
var selected = document.querySelector('select[name="color"] option:checked');
if (selected) color = selected.value;
console.log(color);

<select name="color">
<option value='one'>One<option>
<option selected value='two'>Two<option>
</select>

资源

• Document.querySelector()

  如果未找到匹配项，则返回 null;否则，返回第一个匹配元素

Answer 2

getElementsByName如果没有记录，则返回一个数组和一个空白数组

if (document.getElementsByName("color").length == 0){
color= "red";
} else {
color = document.querySelector('input[name="color"]:checked').value;
}

Answer 3

getElementsByName函数返回一个NodeList元素，即使它是空的！

您可以检查结果的长度if (document.getElementbyName('color').length === 0)

工作演示

Answer 4

因为您将 querySelector 与:checked一起使用，所以它只选择名为"color"的选中复选框。如果未选中任何复选框，则它将返回null。而且由于null没有密钥value，所以会出现错误。尝试

if (document.querySelector('input[name="color"]:checked') === null){
color= "red";
}else{
color = document.querySelector('input[name="color"]:checked').value;
}

Answer 5

为了添加到现有的答案中，DOM 查询很昂贵！因此，请尝试重用一个查询，而不是浪费时间执行两个冗余查询：

var color = (
document.querySelector('input[name="color"]:checked') || { value: 'red' }
).value;

如果不存在此类元素，document.querySelector()将返回null，因此||运算符将在有元素时短路，如果没有，则返回{ value: 'red' }，然后访问所选对象的value属性。