Uncheck a checkbox in dat.gui

When I change the option of a dropdown menu, I want all the checkboxes to be unchecked. Here's the code that I put inside a function that's called when the dropdown menu changes:

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

This does indeed uncheck the checkbox. However, to recheck the checkbox, it takes two clicks. It appears that dat.gui still thinks the checkbox is checked, so it takes one click to uncheck it, and one more to check it.

How do I make dat.gui update the checkboxes?

Edit : Here's the current state of the problem.

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;

With this code, the checkbox is unchecked, due to the .listen() call and setting the variable to false. However, it still takes two clicks for the check to show--one to "uncheck" the checkbox, and one to check it.

---

First set up data binding by telling dat.gui to listen to the value you need to bind to by including .listen() after your .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');
        }
    );

Then set your variable that dat.gui is controlling via the checkbox to false.

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

Some more info about the details of 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/71028.html

上一篇: 取消选中复选框

下一篇: 取消选择dat.gui中的复选框