Login Register

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:

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

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

WidgetKeyboard Interaction
ToggleButtonSpacebar
CheckboxSpacebar
RadioButtonArrow keys: up or left arrow selects the previous radio button, down or right arrow selects the next.

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