Question

I would like to know how to create mutually exclusive checkboxes using dat.GUI.js. API Link: http://workshop.chromeexperiments.com/examples/gui/#1–Basic-Usage.

I have created a jsfiddle [ http://jsfiddle.net/georgeneil/dEbRg/ ] to implement mutually exclusive checkbox. But it has some issues.

Step 1: When i click CheckBox2 its working as expected.

Step 2: when i click CheckBox1 its not getting checked.

Can someone guide me how to fix it or give a link where i can get answers for questions regarding dat.GUI.js

Answer 1

Try changing the code in your jsFiddle as follows:

// dat.gui controls
var view = this;
view.CheckBox1 = true;
view.CheckBox2 = false;


var gui = new dat.GUI();
var CB1Controller = gui.add(view, 'CheckBox1').listen();
CB1Controller.onChange(function(value){
        view.CheckBox1 = true;
        view.CheckBox2 = false;
});

var CB2Controller = gui.add(view, 'CheckBox2').listen();
CB2Controller.onChange(function(value){
        view.CheckBox1 = false;
        view.CheckBox2 = true;
});

The boolean toggle code you were previously using would not generalize well to more than two selections. Also, this version of the code will enforce exactly one checkbox being selected at all times — zero selections will not be a possibility.