User interacts with real html inputs.
On onclick (which occurs by mouse click, space-bar, or
using the arrow keys to switch the selected radio button),
we update the state of the checkbox/radio.
There are two modes:
1. High contrast mode
2. Normal mode
In case 1, the regular html inputs are shown and used by the user.
In case 2, the regular html inputs are invisible but still used by
the user. They are turned quasi-invisible and overlay the background-image.
dijit.form.CheckBox.templateString
summary
dijit.form.CheckBox.baseClass
summary
dijit.form.CheckBox.type
tags: private
type
String
summary
type attribute on <input> node.
Overrides `dijit.form.Button.type`. Users should not change this value.
dijit.form.CheckBox.value
type
String
summary
As an initialization parameter, equivalent to value field on normal checkbox
(if checked, the value is passed as the value when form is submitted).
However, get('value') will return either the string or false depending on
whether or not the checkbox is checked.
set('value', string) will check the checkbox and change the value to the
specified string
set('value', boolean) will change the checked state.
dijit.form.CheckBox.readOnly
type
Boolean
summary
Should this widget respond to user input?
In markup, this is specified as "readOnly".
Similar to disabled except readOnly form values are submitted.
the attributeMap should inherit from dijit.form._FormWidget.prototype.attributeMap
instead of ToggleButton as the icon mapping has no meaning for a CheckBox
Handler for value= attribute to constructor, and also calls to
set('value', val).
description
During initialization, just saves as attribute to the <input type=checkbox>.
After initialization,
when passed a boolean, controls whether or not the CheckBox is checked.
If passed a string, changes the value attribute of the CheckBox (the one
specified as "value" when the CheckBox was constructed (ex: <input
dojoType="dijit.CheckBox" value="chicken">)
// Need to set initial checked state as part of template, so that form submit works. // dojo.attr(node, "checked", bool) doesn't work on IEuntil node has been attached // to , see #8666 this.checkedAttrSetting = this.checked ? "checked" : "";
dojo.declare( "dijit.form.CheckBox", dijit.form.ToggleButton, { // summary: // Same as an HTML checkbox, but with fancy styling. // // description: // User interacts with real html inputs. // On onclick (which occurs by mouse click, space-bar, or // using the arrow keys to switch the selected radio button), // we update the state of the checkbox/radio. // // There are two modes: // 1. High contrast mode // 2. Normal mode // // In case 1, the regular html inputs are shown and used by the user. // In case 2, the regular html inputs are invisible but still used by // the user. They are turned quasi-invisible and overlay the background-image.
// type: [private] String // type attribute on node. // Overrides `dijit.form.Button.type`. Users should not change this value. type: "checkbox",
// value: String // As an initialization parameter, equivalent to value field on normal checkbox // (if checked, the value is passed as the value when form is submitted). // // However, get('value') will return either the string or false depending on // whether or not the checkbox is checked. // // set('value', string) will check the checkbox and change the value to the // specified string // // set('value', boolean) will change the checked state. value: "on",
// readOnly: Boolean // Should this widget respond to user input? // In markup, this is specified as "readOnly". // Similar to disabled except readOnly form values are submitted. readOnly: false,
// the attributeMap should inherit from dijit.form._FormWidget.prototype.attributeMap // instead of ToggleButton as the icon mapping has no meaning for a CheckBox attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, { readOnly: "focusNode" }),
_setValueAttr: function(/*String|Boolean*/ newValue, /*Boolean*/ priorityChange){ // summary: // Handler for value= attribute to constructor, and also calls to // set('value', val). // description: // During initialization, just saves as attribute to the . // // After initialization, // when passed a boolean, controls whether or not the CheckBox is checked. // If passed a string, changes the value attribute of the CheckBox (the one // specified as "value" when the CheckBox was constructed (ex: // dojoType="dijit.CheckBox" value="chicken">) if(typeof newValue == "string"){ this._set("value", newValue); dojo.attr(this.focusNode, 'value', newValue); newValue = true; } if(this._created){ this.set('checked', newValue, priorityChange); } }, _getValueAttr: function(){ // summary: // Hook so get('value') works. // description: // If the CheckBox is checked, returns the value attribute. // Otherwise returns false. return (this.checked ? this.value : false); },
// Override dijit.form.Button._setLabelAttr() since we don't even have a containerNode. // Normally users won't try to set label, except when CheckBox or RadioButton is the child of a dojox.layout.TabContainer _setLabelAttr: undefined,
// Need to set initial checked state as part of template, so that form submit works. // dojo.attr(node, "checked", bool) doesn't work on IEuntil node has been attached // to , see #8666 this.checkedAttrSetting = this.checked ? "checked" : "";
this.inherited(arguments); },
_fillContent: function(/*DomNode*/ source){ // Override Button::_fillContent() since it doesn't make sense for CheckBox, // since CheckBox doesn't even have a container
dojo.declare( "dijit.form.CheckBox", dijit.form.ToggleButton, { // summary: // Same as an HTML checkbox, but with fancy styling. // // description: // User interacts with real html inputs. // On onclick (which occurs by mouse click, space-bar, or // using the arrow keys to switch the selected radio button), // we update the state of the checkbox/radio. // // There are two modes: // 1. High contrast mode // 2. Normal mode // // In case 1, the regular html inputs are shown and used by the user. // In case 2, the regular html inputs are invisible but still used by // the user. They are turned quasi-invisible and overlay the background-image.
// type: [private] String // type attribute on node. // Overrides `dijit.form.Button.type`. Users should not change this value. type: "checkbox",
// value: String // As an initialization parameter, equivalent to value field on normal checkbox // (if checked, the value is passed as the value when form is submitted). // // However, get('value') will return either the string or false depending on // whether or not the checkbox is checked. // // set('value', string) will check the checkbox and change the value to the // specified string // // set('value', boolean) will change the checked state. value: "on",
// readOnly: Boolean // Should this widget respond to user input? // In markup, this is specified as "readOnly". // Similar to disabled except readOnly form values are submitted. readOnly: false,
// the attributeMap should inherit from dijit.form._FormWidget.prototype.attributeMap // instead of ToggleButton as the icon mapping has no meaning for a CheckBox attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, { readOnly: "focusNode" }),
_setValueAttr: function(/*String|Boolean*/ newValue, /*Boolean*/ priorityChange){ // summary: // Handler for value= attribute to constructor, and also calls to // set('value', val). // description: // During initialization, just saves as attribute to the . // // After initialization, // when passed a boolean, controls whether or not the CheckBox is checked. // If passed a string, changes the value attribute of the CheckBox (the one // specified as "value" when the CheckBox was constructed (ex: // dojoType="dijit.CheckBox" value="chicken">) if(typeof newValue == "string"){ this._set("value", newValue); dojo.attr(this.focusNode, 'value', newValue); newValue = true; } if(this._created){ this.set('checked', newValue, priorityChange); } }, _getValueAttr: function(){ // summary: // Hook so get('value') works. // description: // If the CheckBox is checked, returns the value attribute. // Otherwise returns false. return (this.checked ? this.value : false); },
// Override dijit.form.Button._setLabelAttr() since we don't even have a containerNode. // Normally users won't try to set label, except when CheckBox or RadioButton is the child of a dojox.layout.TabContainer _setLabelAttr: undefined,
// Need to set initial checked state as part of template, so that form submit works. // dojo.attr(node, "checked", bool) doesn't work on IEuntil node has been attached // to , see #8666 this.checkedAttrSetting = this.checked ? "checked" : "";
this.inherited(arguments); },
_fillContent: function(/*DomNode*/ source){ // Override Button::_fillContent() since it doesn't make sense for CheckBox, // since CheckBox doesn't even have a container },
// Handle unlikely event that the value attribute has changed this._set("value", this.params.value || "on"); dojo.attr(this.focusNode, 'value', this.value);
dojo.declare( "dijit.form.CheckBox", dijit.form.ToggleButton, { // summary: // Same as an HTML checkbox, but with fancy styling. // // description: // User interacts with real html inputs. // On onclick (which occurs by mouse click, space-bar, or // using the arrow keys to switch the selected radio button), // we update the state of the checkbox/radio. // // There are two modes: // 1. High contrast mode // 2. Normal mode // // In case 1, the regular html inputs are shown and used by the user. // In case 2, the regular html inputs are invisible but still used by // the user. They are turned quasi-invisible and overlay the background-image.
// type: [private] String // type attribute on node. // Overrides `dijit.form.Button.type`. Users should not change this value. type: "checkbox",
// value: String // As an initialization parameter, equivalent to value field on normal checkbox // (if checked, the value is passed as the value when form is submitted). // // However, get('value') will return either the string or false depending on // whether or not the checkbox is checked. // // set('value', string) will check the checkbox and change the value to the // specified string // // set('value', boolean) will change the checked state. value: "on",
// readOnly: Boolean // Should this widget respond to user input? // In markup, this is specified as "readOnly". // Similar to disabled except readOnly form values are submitted. readOnly: false,
// the attributeMap should inherit from dijit.form._FormWidget.prototype.attributeMap // instead of ToggleButton as the icon mapping has no meaning for a CheckBox attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, { readOnly: "focusNode" }),
_setValueAttr: function(/*String|Boolean*/ newValue, /*Boolean*/ priorityChange){ // summary: // Handler for value= attribute to constructor, and also calls to // set('value', val). // description: // During initialization, just saves as attribute to the . // // After initialization, // when passed a boolean, controls whether or not the CheckBox is checked. // If passed a string, changes the value attribute of the CheckBox (the one // specified as "value" when the CheckBox was constructed (ex: // dojoType="dijit.CheckBox" value="chicken">) if(typeof newValue == "string"){ this._set("value", newValue); dojo.attr(this.focusNode, 'value', newValue); newValue = true; } if(this._created){ this.set('checked', newValue, priorityChange); } }, _getValueAttr: function(){ // summary: // Hook so get('value') works. // description: // If the CheckBox is checked, returns the value attribute. // Otherwise returns false. return (this.checked ? this.value : false); },
// Override dijit.form.Button._setLabelAttr() since we don't even have a containerNode. // Normally users won't try to set label, except when CheckBox or RadioButton is the child of a dojox.layout.TabContainer _setLabelAttr: undefined,
// Need to set initial checked state as part of template, so that form submit works. // dojo.attr(node, "checked", bool) doesn't work on IEuntil node has been attached // to , see #8666 this.checkedAttrSetting = this.checked ? "checked" : "";
this.inherited(arguments); },
_fillContent: function(/*DomNode*/ source){ // Override Button::_fillContent() since it doesn't make sense for CheckBox, // since CheckBox doesn't even have a container },
// Handle unlikely event that the value attribute has changed this._set("value", this.params.value || "on"); dojo.attr(this.focusNode, 'value', this.value); },
_onClick: function(/*Event*/ e){ // summary: // Internal function to handle click actions - need to check // readOnly, since button no longer does that check. if(this.readOnly){ dojo.stopEvent(e); return false; } return this.inherited(arguments); } } );
dojo.declare( "dijit.form.RadioButton", dijit.form.CheckBox, { // summary: // Same as an HTML radio, but with fancy styling.
type: "radio", baseClass: "dijitRadio",
_setCheckedAttr: function(/*Boolean*/ value){ // If I am being checked then have to deselect currently checked radio button this.inherited(arguments); if(!this._created){ return; } if(value){ var _this = this; // search for radio buttons with the same name that need to be unchecked dojo.query("INPUT[type=radio]", this.focusNode.form || dojo.doc).forEach( // can't use name= since dojo.query doesn't support [] in the name function(inputNode){ if(inputNode.name == _this.name && inputNode != _this.focusNode && inputNode.form == _this.focusNode.form){ var widget = dijit.getEnclosingWidget(inputNode); if(widget && widget.checked){ widget.set('checked', false); } } } ); }