帶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我只是沒有得到當你想在兩個不同的文件夾中使用相同的參數對象時，無論如何它取決於你。