如何在javascript电子表格中选择所有复选框？

Question

描述很简单：我有三个复选框，第三个复选框在选中时必须选择所有其他复选框（并且一旦未选中，也取消选择它们）。所有这一切都必须在网格中，我不能使用HTML或任何其他语言，但Google Apps脚本。

这对你来说可能是一个简单的任务，但我挣扎了很多，都用JavaScript和英语。无论如何，这里是代码：

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)); 
    //... 
} 

Answer 1

我上次尝试它是不可能与复选框使用ClientHandlers验证。所以你必须坚持使用较慢的serverhandlers，所以你可能需要添加一个无限的进度gif，以便用户知道正在完成的事情。

这是我使用该解决方案的一个例子：

function mygui() { 
    var imgUrl = 'https://f0839004-a-62cb3a1a-s-sites.googlegroups.com/site/hgabreu/files/ajax-loader.gif'; 
    //I may remove this image from this url at any time. Host yours in a place you control 

    var app = UiApp.createApplication().setTitle('CheckAll example'); 
    var panel = app.createVerticalPanel(); 

    var boxes = ['Example 1', 'Test', 'Last check']; 
    var groupName = 'myCheckBoxes'; 

    var groupAll = groupName+','+boxes.length; 
    var image = app.createImage(imgUrl).setId(groupName+',img').setVisible(false); 
    var checkAll = app.createCheckBox("Check All").setId(groupAll).setName(groupAll).addValueChangeHandler(
    app.createServerHandler('checkAll_').addCallbackElement(panel)).addValueChangeHandler(
     app.createClientHandler().forEventSource().setVisible(false).forTargets(image).setVisible(true)); 

    panel.add(checkAll).add(image); 
    for(var i in boxes) 
    panel.add(app.createCheckBox(boxes[i]).setId(groupName+','+i)); 

    SpreadsheetApp.getActive().show(app.add(panel)); 
} 

function checkAll_(e) { 
    var app = UiApp.getActiveApplication(); 
    var p = e.parameter; //just shortening 
    var checkState = p[p.source] == 'true'; 
    var parts = p.source.split(','); 
    var groupName = parts[0]; 
    var size = +parts[1]; 
    for(var i = 0; i < size; ++i) 
    app.getElementById(groupName+','+i).setValue(checkState); 
    app.getElementById(groupName+',img').setVisible(false); 
    app.getElementById(p.source).setVisible(true); 
    return app; 
} 

Answer 2

今天我终于有时间看你的代码，感谢您的支持。

就像你在您的评论说，我不需要像可言，所以我试图把它从功能mygui，让我们来看看，如果我能做到这一点：

function mygui() { 
    var app = UiApp.createApplication().setTitle('CheckAll example'); 
    var panel = app.createVerticalPanel(); 

    var boxes = ['Example 1', 'Test', 'Last check']; 
    var groupName = 'myCheckBoxes'; 

    var groupAll = groupName+','+boxes.length; 
    var checkAll = app.createCheckBox("Check All").setId(groupAll).setName(groupAll).addValueChangeHandler(
    app.createServerHandler('checkAll_').addCallbackElement(panel)); 

    panel.add(checkAll); 
    for(var i in boxes) 
    panel.add(app.createCheckBox(boxes[i]).setId(groupName+','+i)); 

    SpreadsheetApp.getActive().show(app.add(panel)); 
} 

我刚刚取消了第2,3和8行，然后我打了第9和第10行。这足以让我们意外地发现错误，站在错误信息中。

Answer 3

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

我个人觉得它更容易和更清晰的使用，而不必通过ID来获得他们的widget创建变量......几行代码来写，但更容易阅读;-)

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) 
} 

编辑：以下恩里克的评论（很聪明！感谢）在这里是一个“全复选框”版本的作品就好;-)

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) 
}