Google Sheets侧边栏如何传递选中复选框数组到GAS

在Google Sheets中通过Google App Script开发带多选复选框的HTML侧边栏时，需要将用户选中的复选框值组装为数组传回GAS后端。代码编写完成后侧边栏可正常渲染，但点击提交按钮后，用于测试传值效果的toast提示始终不触发，选中值无法成功传递到GAS端。

初始GAS端代码：

function showSidebar() {
  var array = ["A","B","C","D","E"];

  var html = HtmlService.createTemplateFromFile('page');
  html.cols = array;

  var html = html.evaluate().setTitle('Example');
  SpreadsheetApp.getUi() 
    .showSidebar(html);
}

function displayToast(columns) {
 SpreadsheetApp.getActive().toast("Output: " + columns);
}

初始page.html代码：

<body>
    <p>Which columns should be included in the email?</p>
    <? for(var i = 0; i < cols.length; i++) { ?>
    <input type="checkbox" name="col" id="<?= cols[i] ?>" value="<?= cols[i] ?>">Col
    <?= cols[i] ?></input>
    <? } ?><br>
    <button id="btn">Submit</button> <br>
</body>

<script>
  document.getElementById('btn').onclick = function() {
  var markedCheckbox = document.getElementsByName('col');
   google.script.run.displayToast(markedCheckbox);
 }
</script>

• document.getElementsByName('col')返回值是浏览器原生DOM NodeList对象，不属于可序列化的基础数据类型，无法通过google.script.run的参数通道传递到GAS后端，会直接导致后端调用静默失败，无前台报错提示
• 初始逻辑未过滤复选框的选中状态，直接传入了所有复选框的DOM集合，不符合“仅传入选中值”的需求
• HTML书写不规范：<input>是自闭合标签，不需要额外添加</input>闭合标签

核心修改点是在前端脚本中遍历复选框集合，筛选出选中项，提取值组装为纯字符串数组后再传递到后端，纯数组属于GAS可正常解析的合法参数类型。

修正后的page.html代码：

<body>
    <p>Which columns should be included in the email?</p>
    <? for(var i = 0; i < cols.length; i++) { ?>
    <label>
      <input type="checkbox" name="col" value="<?= cols[i] ?>">
      Col <?= cols[i] ?>
    </label>
    <? } ?>
    <br>
    <button id="btn">Submit</button> <br>
</body>

<script>
  document.getElementById('btn').addEventListener('click', function() {
    // 将NodeList转为数组，筛选选中项并提取值
    const selectedCols = Array.from(document.getElementsByName('col'))
      .filter(item => item.checked)
      .map(item => item.value);
    
    // 传递纯字符串数组到GAS后端
    google.script.run.displayToast(selectedCols);
  });
</script>

额外优化：用<label>标签包裹复选框和对应文字，点击文字即可选中复选框，交互更友好；用addEventListener绑定点击事件，兼容性比直接赋值onclick更好。

GAS端可对displayToast做小优化，让输出更易读：

function displayToast(columns) {
  const outputText = columns.length ? columns.join(', ') : '未选择任何列';
  SpreadsheetApp.getActive().toast("选中列：" + outputText);
}

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