3

当我更改下拉菜单的选项时，我希望取消选中所有复选框。这是我放在下拉菜单更改时调用的函数中的代码：

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
        if(inputs[i].type == "checkbox") {
        inputs[i].checked = false; 
    }  
}

这确实取消选中该复选框。但是，要重新选中复选框，需要单击两次。dat.gui 似乎仍然认为该复选框已选中，因此只需单击一下即可取消选中它，再单击一下即可选中它。

如何让 dat.gui 更新复选框？

编辑：这是问题的当前状态。

gui = new dat.GUI;
controllers = [];

var menu = {
    'This is an example': false,
}

controllers[0] = gui.add(menu, 'This is an example').onFinishChange(
    function(value) {console.log('example');} ).listen();

menu['This is an example'] = false;

使用此代码，由于 .listen() 调用并将变量设置为 false，因此未选中该复选框。但是，仍然需要单击两次才能显示检查 - 一次“取消选中”复选框，一次检查它。

4

2 回答 2

2

我最近遇到了同样的问题，必须单击两次复选框才能获得正确的行为，所以这对我有用，希望能让其他读者节省几分钟的时间：

// the usual
var menu = { "foo":false };

// store this reference somewhere reasonable or just look it up in 
// __controllers or __folders like other examples show
var o = menu.add(menu, "foo").onChange(function() { });

// some later time you manually update
o.updateDisplay();
o.__prev = o.__checkbox.checked;
于 2015-06-11T17:24:06.880 回答
1

首先通过告诉 dat.gui 来设置数据绑定来监听你需要绑定的值，方法是.listen()在你的后面包含.add()

gui = new dat.GUI;
controllers = [];

var menu = {
    'This is an example': false,
}

controllers[0] = gui
    .add(menu, 'This is an example')
    .listen()
    .onFinishChange(
        function(value) {
            console.log('example');
        }
    );

然后将 dat.gui 通过复选框控制的变量设置为 false。

menu['This is an example'] = false;

有关 dat.gui 详细信息的更多信息：http: //dat-gui.googlecode.com/git-history/561b4a1411ed13b37be8ff974174d46b1c09e843/index.html

于 2015-01-14T22:08:52.473 回答