与 Google 表格相关的 Google Apps 脚本中的分组复选框答案

【问题标题】：Grouping checkboxes in Google Apps Script tied to Google Sheets与 Google 表格相关的 Google Apps 脚本中的分组复选框
【发布时间】：2015-07-25 23:24:19
【问题描述】：

我创建了一个表单，其中包含一组复选框，这些复选框从 google 工作表的列中填充。因此，如果列中的条目发生变化，表单复选框也会发生变化。

我的问题与获取选择和检索数据的方式有关。

当点击表单上的提交按钮时，它会调用一个函数： google.script.run.test(document.forms[0])

我的测试函数使用 Logger.log() 将信息附加到表格和日志中。

document.forms[0] 的形式为：{=[Level 1, Level 2, Level 3, Level 4], name=test 4}

我的第一个问题是：
如何命名复选框组，以便对象 document.forms[0] 中的数组 - 以便我可以使用 document.forms[0]["SOME-NAME"] 调用它？
现在我必须用 document.forms[0][""] 来调用它，这让我很不舒服。

我的第二个问题解释起来有点奇怪。我发现，如果填充来自 google 表的复选框的描述是两个词的描述 - 那么表单会返回一个带有选择的数组。例如。 from Logger {=[Level 1, Level 2, Level 3, Level 4], name=test 4}

但如果描述是单个单词，则表单将每个选择作为其自己的条目返回例如。来自 Logger {name=test 6, Three=Three, One=One, Two=Two}

如何确保表单返回一个数组而不是单个选择？

我创建的用于测试和演示的工作表在这里：

https://docs.google.com/spreadsheets/d/1vzg4VMgDbqz0ImCH_V5-1vF5qY0UHVGHK6JJfCVrADM/edit?usp=sharing

任何帮助将不胜感激！

Html for the form :
<p><b>Testing check boxes and retrieving info</b> </p>
<hr>
<div>
  <form>
    <table>
      <tr>
        <td>Name:  </td><td><input id="name" name="name" type ="text" /></td>
      </tr>      
      <tr>      
          <td>Choices: </td>
          <td><fieldset  class="group" id="choices" name="choices" >
             --CHANGE--           
          </fieldset></td>          
      </tr>      
      <tr>
        <td>Submit Information: </td><td> <input onclick="formSubmit()" type="button" value="Submit" /></td>
      </tr>      
    </table>
    <hr>
    <table>
      <tr>
        <td>Cancel Transaction: </td><td>
          <input onclick="google.script.host.close()" type="button" value="Cancel" /></td>
       </tr>
     </table>    
  </form>
</div>

<script>
  function formSubmit(){
    google.script.run.test(document.forms[0]);
    google.script.host.close();
  }  
</script>


Function in Code.gs that opens the form:
// Set up the checkbox list and update html code from html file and open form
function openForm(){
  // get Classes to populate the check box list and create html string
  var values = getClasses();
  var html = ""
  for(var i=1; i < values.length; i++){
         html = html + '<input type="checkbox" label="classList" name="' + values[i][0] + '" value="' + values[i][0] + '"> '+values[i][0] + '<br>';
  }

  // replace place holder in html file with checkbox code
  var f1 = HtmlService.createHtmlOutputFromFile('form1').getContent();
  f1 = f1.replace("--CHANGE--",html);

  // open spread sheet and then open form in sheets
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var f2 = HtmlService.createHtmlOutput(f1);
  ss.show(f2); 
}

Function that is called after submit button pressed:
// Get the info from the form and do something with it
function test(info){
  Logger.log(info);
  var classList = info[''];

  if (Array.isArray(classList)){ 
    classList = classList.toString();
  } 

  var data = [info['name'], classList];

  var ss = SpreadsheetApp.getActive().getSheetByName("Test");
  ss.appendRow(data);

}

【问题讨论】：

感谢您创建工作表。你能提供表格的样子吗？你正在使用的代码是什么？
所有代码都可以通过 Google 表格中的“工具”-->“脚本编辑器”菜单访问。表格也可以通过谷歌表格上的“测试复选框”->“打开表格”菜单打开。我不确定将所有代码添加到帖子本身是否合适。 @SandyGood 我应该这样做吗？
“脚本编辑器”选项“灰显”。无法到达那里。您可能已共享它仅查看？最好发布至少一些代码。
@SandyGood HI，刚刚改成可以编辑：docs.google.com/spreadsheets/d/…

标签： javascript google-apps-script google-sheets checkboxlist

【解决方案1】：

要将复选框选择作为数组传递，您需要在将数据传递到服务器之前使用自定义代码处理数据。我会按标签名称获取所有元素。也就是说，获取所有的输入元素。

<script>

  function formSubmit(){
    console.log('document.forms[0] ' + document.forms[0]);

    var choicesElmt = document.getElementById("choices");
    var allInputElements = choicesElmt.getElementsByTagName("input");
    var isChecked=false,
        arrayOfChecked=[],
        thisElmt;

    for (var key in allInputElements) {
      console.log('key is: ' + key)

      thisElmt = allInputElements[key];

      console.log('thisElmt is: ' + thisElmt)

      if (thisElmt!==undefined) {
        isChecked = thisElmt.checked;

      };

      console.log('isChecked: ' + isChecked)
      if (isChecked===true) {
        arrayOfChecked.push(key);

      };
    };

    console.log('arrayOfChecked: ' + arrayOfChecked);

    google.script.run.test(arrayOfChecked);

    //google.script.host.close();
  }

</script>

现在，您的代码正在为每个复选框动态分配一个名称，该名称是电子表格 ColumnA 中的值。 Apps 脚本会更改表单对象，而获取值的唯一方法是使用名称。如果输入中没有检查或值，则不会在表单对象中传递任何值。在服务器端，您不需要在对象上使用零索引。只需使用“点”和名称即可。

Logger.log('info.One: ' + info.One);

如果复选框 2 从未被选中，则 info.Two 将未定义。

您可以在.gs 服务器代码中循环访问对象以查看对象中的所有内容：

for (var key in info) {
  Logger.log('key is: ' + key)
  Logger.log('value is: ' + info[key])

};

【讨论】：

是的，我知道表单对象将复选框选择作为单独的属性返回（当 ColumnA 值是单个单词描述时）。 1. 如何让复选框选择作为具有预定义名称的数组传递？ ColumnA 中的那些描述会反复变化。以及 2. 你能解释一下为什么当 ColumnA 的值是单个单词或多个单词时，表单对象的行为会有所不同吗？

【解决方案2】：

在玩 @SandyGood 的代码时，我能够找到自己问题的答案。

在为每个复选框创建 html 时，会添加此行：

<input type="checkbox" label="classList" name="checkList" value="' + values[i][0] + '">

如果您将每个复选框的名称字段设置为相同的值，则选择将组合为一个数组。

这似乎规范了 document.Forms[0] 的行为 - 如果复选框的名称相同，则 document.Forms[0] 始终返回一个数组，而不管其描述（一个词或两个词）如何复选框。

我已经更新了 Google Sheet 中的代码 ....

【讨论】：