如何在HTML Service中获取选中单选按钮值并传回Apps Script？

我来帮你搞定这个问题！这种情况通常是因为单选按钮的分组逻辑、值的获取方式，或者服务器端函数的调用环节出了小问题。下面给你一套完整的可运行方案，分前端HTML和后端Apps Script两部分拆解：

前端HTML（带单选按钮的弹出表格） #

首先要确保同一组的单选按钮使用相同的name属性，这样浏览器才会将它们视为互斥选项。然后通过JavaScript函数获取选中值，并调用服务器端脚本：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      table {border-collapse: collapse; width: 100%; margin: 10px 0;}
      th, td {border: 1px solid #ddd; padding: 8px; text-align: left;}
    </style>
  </head>
  <body>
    <h3>选择目标项</h3>
    <table>
      <tr>
        <th>选择</th>
        <th>项目内容</th>
      </tr>
      <!-- 示例表格行，可根据需求动态生成或静态定义 -->
      <tr>
        <td><input type="radio" name="selectedOption" value="task1" onclick="handleRadioClick(this.value)"></td>
        <td>同步Sheet数据到数据库</td>
      </tr>
      <tr>
        <td><input type="radio" name="selectedOption" value="task2" onclick="handleRadioClick(this.value)"></td>
        <td>生成月度报表</td>
      </tr>
      <tr>
        <td><input type="radio" name="selectedOption" value="task3" onclick="handleRadioClick(this.value)"></td>
        <td>清除历史缓存数据</td>
      </tr>
    </table>

    <script>
      // 处理单选按钮点击事件，传递选中值到服务器端
      function handleRadioClick(selectedValue) {
        // 调试用：确认获取到选中值
        console.log("当前选中值：", selectedValue);
        
        // 调用服务器端函数，同时绑定成功/失败回调
        google.script.run
          .withSuccessHandler(function(response) {
            alert("操作执行成功：" + response);
            // 执行完成后关闭弹窗
            google.script.host.close();
          })
          .withFailureHandler(function(error) {
            alert("执行出错：" + error.message);
          })
          .executeSelectedTask(selectedValue); // 对应后端函数名
      }
    </script>
  </body>
</html>

后端Apps Script代码 #

在Google Sheets的脚本编辑器中，编写触发弹窗和处理选中值的服务器端函数：

// 触发弹窗的函数（可绑定到自定义菜单或按钮）
function openCustomDialog() {
  const htmlContent = HtmlService.createHtmlOutputFromFile('你的HTML文件名')
    .setWidth(450)
    .setHeight(350);
  SpreadsheetApp.getUi().showModalDialog(htmlContent, '请选择操作');
}

// 处理前端传递的选中值的核心函数
function executeSelectedTask(selectedValue) {
  const activeSheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  
  // 这里替换为你的实际业务逻辑
  switch(selectedValue) {
    case "task1":
      activeSheet.getRange('B1').setValue("执行同步数据任务");
      break;
    case "task2":
      activeSheet.getRange('B1').setValue("生成月度报表任务");
      break;
    case "task3":
      activeSheet.getRange('B1').setValue("清除缓存数据任务");
      break;
    default:
      throw new Error("无效的选中值");
  }
  
  // 返回结果给前端回调
  return `已执行【${selectedValue}】对应的操作`;
}

关键注意事项 #

• 单选按钮分组：必须给同一组单选按钮设置相同的name属性，否则浏览器不会限制互选，也无法正确获取选中值。
• 值的传递效率：直接在onclick事件中传递this.value是最直观的方式，也可以用document.querySelector('input[name="selectedOption"]:checked')?.value来主动查询选中值（适合非点击触发的场景）。
• 回调函数的必要性：google.script.run必须绑定withSuccessHandler和withFailureHandler，否则无法知道服务器端函数的执行状态，调试错误会很困难。
• 权限授权：第一次运行脚本时会要求授权，确保授予脚本操作Sheet的权限，否则服务器端函数无法正常执行。

如果之前的代码没成功，大概率是单选按钮未正确分组，或者调用服务器端函数时参数传递有误，按照上面的方案调整应该就能解决问题啦！

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