dat.gui单选按钮

Question

我正在使用三个js中的复选框。我创建了一个用户控制面板，其中添加了复选框。我想要做的是当我单击任何一个复选框而另一个复选框已经被选中前一个复选框时应该不受检查。所以任何人都可以告诉我该怎么做。

这是我为复选框编写的代码。

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

您可以.listen()为每个控制器设置.onChange()一个功能，该功能将所有参数设置为false，然后将您需要的参数设置为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示例

PS，我只是没来得及，要在两个不同的文件夹中使用相同的参数对象，但这取决于您。