Create mutually exclusive checkboxes in "dat GUI" api.

The problem : I want only one checkbox to be selected at a time. I want it to work same as radio buttons.
 Note : dat gui does not offer radio buttons.

Please download stats.min.js from attachment.

jsp page :
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="abc.js"></script>
<script type="text/javascript" src="dat.gui.min.js"></script>

<body onload="gui();">


Open in new window

javscript page: "abc.js"
var gui_control = function () {


function gui()
var gui_controls=new gui_control();
var gui = new dat.GUI({autoPlace:true}); 

Open in new window

Pradip ShenolkarAsked:
Who is Participating?
Robert SchuttSoftware EngineerCommented:
Try this instead of your current lines 14-16 in abc.js:
    gui.add(gui_controls,'option1').listen().onChange(function(value) { gui_controls.option1 = true; gui_controls.option2 = false; gui_controls.option3 = false; } );
    gui.add(gui_controls,'option2').listen().onChange(function(value) { gui_controls.option1 = false; gui_controls.option2 = true; gui_controls.option3 = false; } );
    gui.add(gui_controls,'option3').listen().onChange(function(value) { gui_controls.option1 = false; gui_controls.option2 = false; gui_controls.option3 = true; } );

Open in new window

Note that it's a bit quick & dirty. I found some code in the google documentation but found a problem with setting the value of the checkboxes, it seems they stay checked as far as the browser is concerned so clicking on them a second time did nothing, the third time was ok again... That's why I added the setting to true of the clicked box which shouldn't be necessary normally I would think.

[edit] live example here:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.