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"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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>
</head>

<body onload="gui();">

</body>
</html>

Open in new window


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

    this.option1=false;
    this.option2=false;
    this.option3=false;
    
    
}

function gui()
{
var gui_controls=new gui_control();
var gui = new dat.GUI({autoPlace:true}); 
gui.add(gui_controls,'option1');
gui.add(gui_controls,'option2');
gui.add(gui_controls,'option3');
}

Open in new window

dat.gui.min.js
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: http://schutt.nl/ee/Q_28641457/
0
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.