JS中document.querySelectorAll传多变量仅返回首个元素的解决方法

问题出在document.querySelectorAll()的参数使用上——这个方法只接受第一个参数作为选择器字符串，后续传入的参数会被直接忽略，所以你只能获取到第一个类名对应的元素。

要获取多个类名的所有匹配元素，需要把多个类选择器拼接成单个用逗号分隔的字符串传入，正确写法如下：

固定参数版本（适配你的调用方式） #

function format_selectboxes(c1,c2,c3) {
  var x;
  // 把三个类选择器用逗号拼接成一个字符串
  x = document.querySelectorAll("."+c1 + ", ." + c2 + ", ." + c3);
  var l = x.length;
  for (var i = 0; i < l; i++) {
    // 执行你的操作
    console.log(x[i]);
  }
}

更通用的版本（支持任意数量的类名参数） #

如果以后需要传入更多类名，可以用剩余参数语法，让函数更灵活：

function format_selectboxes(...classNames) {
  // 把每个类名转成`.类名`格式，再用逗号拼接
  const selector = classNames.map(cls => `.${cls}`).join(', ');
  const elements = document.querySelectorAll(selector);
  
  for (const el of elements) {
    // 执行你的操作
    console.log(el);
  }
}

调用方式不变，甚至可以传入更多类名：

<body onload="format_selectboxes('custom-select_1','custom-select_2','custom-select_3','custom-select_4')">

内容的提问来源于stack exchange，提问作者Nico44044