Question

我想知道如何使用dat.GUI.js创建互斥的复选框。 API链接：http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage。

我创建了一个jsfiddle [http://jsfiddle.net/georgeneil/dEbRg/]来实现互斥复选框。但它有一些问题。

步骤1：当我点击CheckBox2时，它按预期工作。

第2步：当我点击CheckBox1时，它未被检查。

有人可以指导我如何修复它或提供一个链接，我可以获得有关dat.GUI.js的问题的答案

Answer 1

尝试更改jsFiddle中的代码，如下所示：

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

您之前使用的布尔切换代码不能很好地概括为两个以上的选择。此外，此版本的代码将强制执行始终选中的一个复选框 - 零选择将不可能。

使用dat.GUI.js API的互斥复选框

1 个答案: