CheckBox, RadioButton, ToggleButton

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:

Are you a Developer

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<!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>

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:

Metallica Extreme Slayer

<!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>

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.