Uncheck a checkbox in dat.gui

Question

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.

Can you make a minimal example? The code you've shown doesn't provide insight into the problem. — , Jan 14 '15 at 22:08
I think you have to listen to changes. Have a look at this answer: http://stackoverflow.com/a/16174621/934652 — Sjors, Jan 14 '15 at 22:09
@Jhawins, I added an example of a gui and one checkbox. Let me know if there's another part you need to see. — user3448821, Jan 14 '15 at 22:39
@Sjors, I think I need to first set the variable to false, and then the updateDisplay function will uncheck the checkbox. So now the issue is to make the variable false (see the edited question). — user3448821, Jan 14 '15 at 22:40
@PatrickGunderson, it doesn't throw an error, but it has no effect. Edit: it does work (I had to call 'updateDisplay()' to see the effect), but there is still the original problem of having to click the checkbox twice. — user3448821, Jan 14 '15 at 22:43
You need to add `.listen()` after your `add()` call to bind to the var. — Patrick Gunderson, Jan 14 '15 at 22:45
Just added '.listen()'. It takes care of updating the checkbox, but the original problem of having to click the checkbox twice remains. — user3448821, Jan 14 '15 at 22:49

score 3 · Answer 1 · answered Jun 11 '15 at 17:24

I've recently come across the same issue with having to click the checkbox twice to get the proper behavior, so here's what worked for me and will hopefully spare other readers a few minutes of head-scratching:

// 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;

Patrick Gunderson · Answer 2 · 2015-01-14T22:57:55.217

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

This is what I thought should happen, but I wasn't sure how to do it. I edited the question with the problem I had. — user3448821, Jan 14 '15 at 22:33

Uncheck a checkbox in dat.gui

2 Answers2