取消选择dat.gui中的复选框

当我更改下拉菜单的选项时,我想要取消选中所有复选框。 下面是我放入一个函数的代码,当下拉菜单发生变化时调用该函数:

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,未选中该复选框。 但是,检查仍然需要两次点击才能显示 - 一个用于“取消”复选框,另一个用于检查它。


首先通过告诉dat.gui通过在你的.add()之后包含.listen()来监听你需要绑定的值来建立数据绑定。

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


我最近遇到了同样的问题,必须点击复选框两次以获得正确的行为,所以这里是对我有用的,并且希望能够让其他读者在几分钟的时间内搔痒:

// 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;
链接地址: http://www.djcxy.com/p/71027.html

上一篇: Uncheck a checkbox in dat.gui

下一篇: Check/Uncheck checkbox with JavaScript?