dijit/form/CheckBox.js

  • Provides:

    • dijit.form.CheckBox
  • dijit.form.CheckBox

    • type
      Function
    • chains:
      • dijit.form.ToggleButton: (prototype)
      • dijit.form.ToggleButton: (call)
    • 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.
  • 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
  • dijit.form.CheckBox.attributeMap

    • summary
  • dijit.form.CheckBox._setReadOnlyAttr

    • type
      Function
    • parameters:
      • value: (typeof Boolean)
    • source: [view]
         this._set("readOnly", value);
         dojo.attr(this.focusNode, 'readOnly', value);
         dijit.setWaiState(this.focusNode, "readonly", value);
    • summary
  • dijit.form.CheckBox._setValueAttr

    • type
      Function
    • parameters:
      • newValue: (typeof String|Boolean)
      • priorityChange: (typeof Boolean)
    • source: [view]
         if(typeof newValue == "string"){
          this._set("value", newValue);
          dojo.attr(this.focusNode, 'value', newValue);
          newValue = true;
         }
         if(this._created){
          this.set('checked', newValue, priorityChange);
         }
    • summary
      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">)
  • dijit.form.CheckBox._getValueAttr

    • type
      Function
    • source: [view]
         return (this.checked ? this.value : false);
    • summary
      Hook so get('value') works.
    • description
      If the CheckBox is checked, returns the value attribute.
      Otherwise returns false.
  • dijit.form.CheckBox._setLabelAttr

    • summary
  • dijit.form.CheckBox.postMixInProperties

    • type
      Function
    • source: [view]
         if(this.value == ""){
          this.value = "on";
         }


         // 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);
    • summary
  • dijit.form.CheckBox._fillContent

    • type
      Function
    • parameters:
      • source: (typeof DomNode)
    • source: [view]
      define("dijit/form/CheckBox", ["dojo", "dijit", "text!dijit/form/templates/CheckBox.html", "dijit/form/ToggleButton"], function(dojo, dijit) {


      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.


        templateString: dojo.cache("dijit.form", "templates/CheckBox.html"),


        baseClass: "dijitCheckBox",


        // 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"
        }),


        _setReadOnlyAttr: function(/*Boolean*/ value){
         this._set("readOnly", value);
         dojo.attr(this.focusNode, 'readOnly', value);
         dijit.setWaiState(this.focusNode, "readonly", value);
        },


        _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,


        postMixInProperties: function(){
         if(this.value == ""){
          this.value = "on";
         }


         // 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
    • summary
  • dijit.form.CheckBox.reset

    • type
      Function
    • source: [view]
      define("dijit/form/CheckBox", ["dojo", "dijit", "text!dijit/form/templates/CheckBox.html", "dijit/form/ToggleButton"], function(dojo, dijit) {


      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.


        templateString: dojo.cache("dijit.form", "templates/CheckBox.html"),


        baseClass: "dijitCheckBox",


        // 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"
        }),


        _setReadOnlyAttr: function(/*Boolean*/ value){
         this._set("readOnly", value);
         dojo.attr(this.focusNode, 'readOnly', value);
         dijit.setWaiState(this.focusNode, "readonly", value);
        },


        _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,


        postMixInProperties: function(){
         if(this.value == ""){
          this.value = "on";
         }


         // 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
        },


        reset: function(){
         // Override ToggleButton.reset()


         this._hasBeenBlurred = false;


         this.set('checked', this.params.checked || false);


         // Handle unlikely event that the value attribute has changed
         this._set("value", this.params.value || "on");
         dojo.attr(this.focusNode, 'value', this.value);
    • summary
  • dijit.form.CheckBox._onFocus

    • type
      Function
    • source: [view]
         if(this.id){
          dojo.query("label[for='"+this.id+"']").addClass("dijitFocusedLabel");
         }
         this.inherited(arguments);
    • summary
  • dijit.form.CheckBox._onBlur

    • type
      Function
    • source: [view]
         if(this.id){
          dojo.query("label[for='"+this.id+"']").removeClass("dijitFocusedLabel");
         }
         this.inherited(arguments);
    • summary
  • dijit.form.CheckBox._onClick

    • type
      Function
    • parameters:
      • e: (typeof Event)
    • source: [view]
         if(this.readOnly){
          dojo.stopEvent(e);
          return false;
         }
         return this.inherited(arguments);
    • summary
      Internal function to handle click actions - need to check
      readOnly, since button no longer does that check.
  • dijit.form.CheckBox.checkedAttrSetting

    • summary
  • dijit.form.CheckBox._hasBeenBlurred

    • summary
  • dijit.form.RadioButton

    • type
      Function
    • chains:
      • dijit.form.CheckBox: (prototype)
      • dijit.form.CheckBox: (call)
    • summary
      Same as an HTML radio, but with fancy styling.
  • dijit.form.RadioButton.type

    • summary
  • dijit.form.RadioButton.baseClass

    • summary
  • dijit.form.RadioButton._setCheckedAttr

    • type
      Function
    • parameters:
      • value: (typeof Boolean)
    • source: [view]
      define("dijit/form/CheckBox", ["dojo", "dijit", "text!dijit/form/templates/CheckBox.html", "dijit/form/ToggleButton"], function(dojo, dijit) {


      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.


        templateString: dojo.cache("dijit.form", "templates/CheckBox.html"),


        baseClass: "dijitCheckBox",


        // 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"
        }),


        _setReadOnlyAttr: function(/*Boolean*/ value){
         this._set("readOnly", value);
         dojo.attr(this.focusNode, 'readOnly', value);
         dijit.setWaiState(this.focusNode, "readonly", value);
        },


        _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,


        postMixInProperties: function(){
         if(this.value == ""){
          this.value = "on";
         }


         // 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
        },


        reset: function(){
         // Override ToggleButton.reset()


         this._hasBeenBlurred = false;


         this.set('checked', this.params.checked || false);


         // Handle unlikely event that the value attribute has changed
         this._set("value", this.params.value || "on");
         dojo.attr(this.focusNode, 'value', this.value);
        },


        _onFocus: function(){
         if(this.id){
          dojo.query("label[for='"+this.id+"']").addClass("dijitFocusedLabel");
         }
         this.inherited(arguments);
        },


        _onBlur: function(){
         if(this.id){
          dojo.query("label[for='"+this.id+"']").removeClass("dijitFocusedLabel");
         }
         this.inherited(arguments);
        },


        _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);
             }
            }
           }
          );
         }
    • summary
  • dijit.form.RadioButton._clicked

    • type
      Function
    • parameters:
      • e: (typeof Event)
    • source: [view]
         if(!this.checked){
          this.set('checked', true);
         }
    • summary
  • dijit.form

    • type
      Object
    • summary
  • dijit

    • type
      Object
    • summary