We help IT Professionals succeed at work.

Uncheck the checked checkbox when clicked in javascript

Pradip Shenolkar
Pradip Shenolkar asked
on
The problem: When I click on checked checkbox they should get unchecked.


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


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').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


Please download dat.gui.min.js from attachment.
dat.gui.min.js
Comment
Watch Question

Top Expert 2011

Commented:
Very hard to tell what you are trying to do but can't you do it with jquery or just plain javascript?

Author

Commented:
No I can't use plain javascript or jquery.
I need to use dat.gui library
Top Expert 2011

Commented:
Ok, sorry I can't help you then.
Pravin AsarPrincipal Systems Engineer
Top Expert 2005

Commented:
From the description of the problem, looks like you want only one value selected.
So instead of using checkbox control, can  you use radio control ??
In that case, you do not need have any javascript.
Software Engineer
Commented:
Finally found the correct way to do it I think:
function gui()
{

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

    var gui_opt1 = gui.add(gui_controls,'option1');
    var gui_opt2 = gui.add(gui_controls,'option2');
    var gui_opt3 = gui.add(gui_controls,'option3');

    gui_opt1.onChange(function(value) { if (value) { gui_opt2.setValue(false); gui_opt3.setValue(false); } } );
    gui_opt2.onChange(function(value) { if (value) { gui_opt1.setValue(false); gui_opt3.setValue(false); } } );
    gui_opt3.onChange(function(value) { if (value) { gui_opt1.setValue(false); gui_opt2.setValue(false); } } );
}

Open in new window

live example here: http://schutt.nl/ee/Q_28645759/

Author

Commented:
@Robert Schutt
 Thanks alot.
 It works as I wanted.