Radio buttons with dat.gui

Question

I am working with the check boxes in three js.I have created a user control panel in which I have added check boxes.What I want to do is when I click on any check box when the other check box is already checked the previous one should be unchecked.So can anyone please tell me how to that.

This is the code that I have written for check boxes.

function addDatGui(){
  var gui = new dat.GUI();
              
  parameters = {
    a:false,
    b:false,
    c:false
  }

  var first = gui.addFolder("Plastic");
    var pos1 = first.add(parameters,'a').name('Possitive Charge');
    var neg1 = first.add(parameters,'b').name('Negative Charge');
    var neu1 = first.add(parameters,'c').name('Neutral');

  var second = gui.addFolder("Glass");
    var pos2 = second.add(parameters,'a').name('Possitive Charge');
    var neg2 = second.add(parameters,'b').name('Negative Charge');
    var neu2 = second.add(parameters,'c').name('Neutral');

  pos1.onChange(PCharge);
  neg1.onChange(Ncharge);
  neu1.onChange(NeCharge);
  var show = gui.add(parameters,'a').name('Show Charge'); 
}

Answer 1

You can set .listen() to each controller and .onChange() with a function which will set all parameters to false and then the parameter you need to true:

var gui = new dat.GUI();

parameters = {
  a: false,
  b: false,
  c: false
}

var first = gui.addFolder("Plastic");
var pos1 = first.add(parameters, 'a').name('Possitive Charge').listen().onChange(function(){setChecked("a")});
var neg1 = first.add(parameters, 'b').name('Negative Charge').listen().onChange(function(){setChecked("b")});
var neu1 = first.add(parameters, 'c').name('Neutral').listen().onChange(function(){setChecked("c")});

function setChecked( prop ){
  for (let param in parameters){
    parameters[param] = false;
  }
  parameters[prop] = true;
}

jsfiddle example

PS I just didn't get the moment, when you want to use the same object of parameters in two different folders, but it's up to you anyway.