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()

  Returns null if no matches are found; otherwise, it returns the first matching element