- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
CheckBox, RadioButton, ToggleButton
Submitted by davidb on Sat, 08/25/2007 - 23:46.
dijit.form.CheckBox, dijit.form.RadioButton, and dijit.form.ToggleButton capture binary user-choices. Unlike command buttons, which do some action on being pressed, these buttons are more for form data. ToggleButtons can be used on Toolbars - the Bold button being the classic example - so they act a little like a data button, a little like a command button.
Examples
CheckBoxes in dijit are very intuitive and easy to use. Markup constructs for check boxes is the same as html but dojo provides more control and styling options than a conventional check box. The following example creates a CheckBox:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Checkbox Example</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.CheckBox");
</script>
</head>
<body class="tundra">
<input id="cb" dojotype="dijit.form.CheckBox"
name="developer" checked="checked" value="on"
type="checkbox" />
<label for="cb"> Are you a Developer </label>
</body></html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Checkbox Example</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.CheckBox");
</script>
</head>
<body class="tundra">
<input id="cb" dojotype="dijit.form.CheckBox"
name="developer" checked="checked" value="on"
type="checkbox" />
<label for="cb"> Are you a Developer </label>
</body></html>
dijit.form.ToggleButton works very similarly to a checkbox, but requires including the "dijit.form.Button" module.
RadioButtons in dijit are also easy to create and use as the following example shows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio Button Example</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.CheckBox");
</script>
</head>
<body class="tundra">
<input dojoType="dijit.form.RadioButton" id="sum1" name="album"
checked="checked" value="metallica" type="radio" />
<label for="sum1"> Metallica </label>
<input dojotype="dijit.form.RadioButton" id="sum2" name="album"
value="Extreme" type="radio" />
<label for="sum2"> Extreme </label>
<input dojotype="dijit.form.RadioButton" id="sum3" name="album"
value="Slayer" type="radio" />
<label for="sum3"> Slayer </label>
</body></html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio Button Example</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.CheckBox");
</script>
</head>
<body class="tundra">
<input dojoType="dijit.form.RadioButton" id="sum1" name="album"
checked="checked" value="metallica" type="radio" />
<label for="sum1"> Metallica </label>
<input dojotype="dijit.form.RadioButton" id="sum2" name="album"
value="Extreme" type="radio" />
<label for="sum2"> Extreme </label>
<input dojotype="dijit.form.RadioButton" id="sum3" name="album"
value="Slayer" type="radio" />
<label for="sum3"> Slayer </label>
</body></html>
The RadioButton class is declared in the CheckBox.js file, hence you need to dojo.require() only dijit.form.CheckBox for RadioButtons to work.
dijit.form.CheckBox, dijit.form.RadioButton, dijit.form.ToggleButton
Checkbox, RadioButton and ToggleButton capture binary user choices. Checkbox and RadioButton are like their HTML counterparts, while ToggleButton can be pushed in or out (like the Bold button in word processors).
|
||
Attributes
|
||
checked | String | Corresponds to the native HTML input element's attribute. In markup, specified as "checked='checked'" or just "checked". True if the button is depressed, or the checkbox is checked, or the radio button is selected, etc. Use setChecked() to change after creation time. |
Methods
|
||
setValue(/* Boolean */ checked) | If true, turn button or box on. | |
Extension Points
|
||
onClick(/*Event*/ e) | Called when widget is clicked. |
Accessibility
Keyboard
Tabbing moves through each form element, however, for radio buttons, tabbing will only go to the currently selected item in the radio group.
Widget | Keyboard Interaction |
---|---|
ToggleButton | Spacebar |
Checkbox | Spacebar |
RadioButton | Arrow keys: up or left arrow selects the previous radio button, down or right arrow selects the next. |
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
Checkbox value
The "value" Checkbox attribute isn't entirely as intuitive as the intro claims. This is the value returned if the Checkbox is checked.
What is the value returned if the Checkbox is unchecked? Hmm, I'm not sure. However, for Firefox and IE6 this value (whatever it is) is interpreted by Perl as a false.
Well, intuitive for HTML at least
If the checkbox is unchecked, that parameter is not passed back on form submission. This is HTML behavior, and the Dijit checkbox works exactly the same.
"required" attribute in radio button group
maybe it would be useful for when no button is checked by default..?
Trouble refreshing display when value changed programmatically?
Make sure to use setChecked() function to set the value of the checkbox programmatically. If you only set the .checked attribute/property, the display will not be updated until the mouse is moved over and out of the checkbox.
submit value if check box unchecked :)
I would find extremly useful to be able to submit a value if the checkbox isn't checked when needed. A lot of programmers map html form fields to database fields so that the $_POST array submited can be can be used raw to update or insert a new record. However if a database field is set to "null not allowed" and nothing is submited (current HTML behaviour) then ... it can be very painfull.
An attribute "uncheckedValue=" would be awesome.
Thanks for this great framework
Babas