如何使用javascript选择Google电子表格中的所有复选框？ [英] How do I select all the checkboxes in google spreadsheet with javascript?

问题描述

说明很简单：我有三个复选框，第三个复选框必须在选中时选择所有其他复选框（并在取消选中后取消选中）。所有这些都必须在网格中，我不能使用html或任何其他语言，但不能使用Google Apps脚本。

The description is simple: I have three checkboxes and the third one must select all the others when selected (and deselect them as well, once it's unchecked). All this must be in a grid, I can't use html or any other language but Google Apps Script.

这可能是一个简单的任务，挣扎很多，都用javascript和英语。无论如何这里的代码：

This is probably a simple task for you, but I'm struggling a lot, both with javascript and english. Anyway here's the code:

function checkboxes() {
  var range = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = range.getSheetId();
  var myapp = UiApp.createApplication().setTitle('Title').setWidth(1000).setHeight(100);
  var mygrid = myapp.createGrid(3, 3).setCellPadding(5).setCellSpacing(5);

  //One
  mygrid.setWidget(0, 0, myapp.createLabel('One').setId('One'));
  mygrid.setWidget(0, 1, myapp.createCheckBox().setName('One'));

  //Two
  mygrid.setWidget(1, 0, myapp.createLabel('Two').setId('Two'));
  mygrid.setWidget(1, 1, myapp.createCheckBox().setName('Two'));

  var handler1 = myapp.createClientHandler().forTargets(myapp.getElementById('One')).setValue(true).forTargets(myapp.getElementById('Two')).setValue(true);

  //Last
  mygrid.setWidget(2, 0, myapp.createLabel('Last').setId('Last'));
  mygrid.setWidget(2, 1, myapp.createCheckBox().setName('Last').OnClickHandler(handler1));
  //...
}

推荐答案

这里是一个可能的解决方法与客户端处理程序：（测试）

Here is a possible workaround with client handler :(tested)

我个人发现更容易和更清楚地使用变量为小部件创建，通过id ...几行代码写入，但更容易阅读; - ）

I personally find it easier and more clear to use variables for widget creation instead of having to get them by id... a few lines of code to write but easier to read ;-)

function checkboxes() {
  var range = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = range.getSheetId();
  var app = UiApp.createApplication().setTitle('Title').setWidth(200).setHeight(150);
  var grid = app.createGrid(4, 3).setCellPadding(5).setCellSpacing(5);

  //One
  var one = app.createCheckBox().setName('One');
  grid.setWidget(0, 0, app.createLabel('One').setId('One'));
  grid.setWidget(0, 1, one);

  //Two
  var two = app.createCheckBox().setName('Two')
  grid.setWidget(1, 0, app.createLabel('Two').setId('Two'));
  grid.setWidget(1, 1, two);

  //three
  var three = app.createCheckBox().setName('Three')
  grid.setWidget(2, 0, app.createLabel('Three').setId('Three'));
  grid.setWidget(2, 1, three);
  //...
  var r1 = app.createRadioButton('radio').setHTML('All');
  var r2 = app.createRadioButton('radio').setHTML('None');
  grid.setWidget(3, 0, r1)
  grid.setWidget(3, 1, r2)

  var Chandler1 = app.createClientHandler().forTargets(one,two,three).setValue(true)
  r1.addClickHandler(Chandler1)
  var Chandler2 = app.createClientHandler().forTargets(one,two,three).setValue(false)
  r2.addClickHandler(Chandler2)
  app.add(grid)
  var doc = SpreadsheetApp.getActive()
  doc.show(app)
}

EDIT：下面是一个完整的复选框 fine; - ）

EDIT : following Henrique's comment (very clever !! thanks) here is a 'full checkBoxes' version that works just fine ;-)

function checkboxes2() {
  var range = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = range.getSheetId();
  var app = UiApp.createApplication().setTitle('checkBoxes test').setWidth(200).setHeight(150);
  var grid = app.createGrid(4, 3).setCellPadding(5).setCellSpacing(5);

  var one = app.createCheckBox().setName('One');
  grid.setWidget(0, 0, app.createLabel('One').setId('One'));
  grid.setWidget(0, 1, one);

  var two = app.createCheckBox().setName('Two')
  grid.setWidget(1, 0, app.createLabel('Two').setId('Two'));
  grid.setWidget(1, 1, two);

  var allP = app.createVerticalPanel()
  var allA = app.createCheckBox().setName('allA');
  var allB = app.createCheckBox().setName('allB').setVisible(false);
  var allP = app.createVerticalPanel().add(allA).add(allB);
  grid.setWidget(2, 0, app.createLabel('All').setId('all'));
  grid.setWidget(2, 1, allP);

  var ChandlerA = app.createClientHandler().forTargets(one,two,allB).setValue(true).forTargets(allB).setVisible(true).forEventSource().setVisible(false);
  allA.addClickHandler(ChandlerA)
  var ChandlerB = app.createClientHandler().forTargets(one,two,allA).setValue(false).forTargets(allA).setVisible(true).forEventSource().setVisible(false);
  allB.addClickHandler(ChandlerB)
  app.add(grid)
  var doc = SpreadsheetApp.getActive()
  doc.show(app)
}

这篇关于如何使用javascript选择Google电子表格中的所有复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！