如何让Google Sheets多选侧边栏自动勾选单元格已选项？

一、修改Code.js文件 #

1. 新增获取活动单元格内容的函数
   直接在Code.js里添加这段代码：

function getActiveCellValue() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const activeCell = sheet.getActiveCell();
  return activeCell.getValue() || "";
}

2. 修改打开侧边栏的函数
   找到你原来打开侧边栏的函数（通常叫showSidebar），替换成下面的代码，实现把单元格值传递给侧边栏：

function showSidebar() {
  const cellValue = getActiveCellValue();
  const html = HtmlService.createHtmlOutputFromFile('SIDEBAR')
    .setTitle('多选菜单')
    .setWidth(300);
  html.append(`<script>const preSelectedValues = "${cellValue}";</script>`);
  SpreadsheetApp.getUi().showSidebar(html);
}

二、修改SIDEBAR.html文件 #

1. 调整复选框HTML结构（若未正确设置）
   确保每个复选框都添加value属性，属性值要和单元格内的选项完全一致，示例如下：

<div class="ui checkbox">
  <input type="checkbox" value="选项1" name="options">
  <label>选项1</label>
</div>
<div class="ui checkbox">
  <input type="checkbox" value="选项2" name="options">
  <label>选项2</label>
</div>
<!-- 其他选项按此格式复制修改即可 -->

2. 添加自动勾选的JavaScript逻辑
   在HTML的<script>标签区域（需放在jQuery和Semantic UI资源引入之后），添加这段代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<script>
$(document).ready(function() {
  // 初始化Semantic UI复选框样式
  $('.ui.checkbox').checkbox();

  // 解析单元格的CSV内容为选项数组
  let selectedValues = [];
  if (preSelectedValues) {
    selectedValues = preSelectedValues.split(',').map(val => val.trim());
  }

  // 遍历所有复选框，匹配到已选值就自动勾选
  $('.ui.checkbox input[type="checkbox"]').each(function() {
    const checkboxVal = $(this).val();
    if (selectedValues.includes(checkboxVal)) {
      $(this).prop('checked', true);
      $(this).closest('.ui.checkbox').checkbox('check');
    }
  });
});
</script>

注意事项 #

• 复选框的value值必须和单元格内的选项完全匹配（包括大小写、空格），否则无法自动勾选
• 若单元格CSV包含特殊字符（如引号），可根据实际情况调整解析逻辑，普通场景上述代码足够使用
• 切换活动单元格后，需重新打开侧边栏才能刷新勾选状态

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