如何用JavaScript获取name属性为数组格式的checkbox输入元素

针对name属性为website_response[]的复选框，前端JavaScript获取时不需要对属性名里的方括号做特殊转义，直接把完整属性名作为字符串查询即可，以下是两种常用实现方式：

方法1：使用getElementsByName直接获取 #

直接传入完整的name属性值，即可拿到所有匹配的复选框集合：

// 获取所有对应复选框元素
const checkboxes = document.getElementsByName('website_response[]');
// 存储选中的结果
const selectedRes = [];

checkboxes.forEach(item => {
  // 可单独获取每个复选框的选中状态和值
  console.log('选中状态：', item.checked, '对应值：', item.value);
  if (item.checked) {
    selectedRes.push(item.value);
  }
});

console.log('所有选中的值：', selectedRes);

方法2：使用querySelectorAll属性选择器获取 #

适配性更强，还可以结合表单做范围限定：

// 限定只在name为formname的表单下查询
const checkboxes = document.formname.querySelectorAll('input[name="website_response[]"]');
const selectedRes = [];

for (let i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    selectedRes.push(checkboxes[i].value);
  }
}

补充：如果需要监听复选框的选中变化事件，也可以直接给获取到的元素集合绑定监听：

document.querySelectorAll('input[name="website_response[]"]').forEach(item => {
  item.addEventListener('change', function() {
    console.log('当前操作的复选框值：', this.value, '新的选中状态：', this.checked);
  });
});

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