CheckBox.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dijit.form.CheckBox"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dijit.form.CheckBox"] = true;
  8. dojo.provide("dijit.form.CheckBox");
  9. dojo.require("dijit.form.ToggleButton");
  10. dojo.declare(
  11. "dijit.form.CheckBox",
  12. dijit.form.ToggleButton,
  13. {
  14. // summary:
  15. // Same as an HTML checkbox, but with fancy styling.
  16. //
  17. // description:
  18. // User interacts with real html inputs.
  19. // On onclick (which occurs by mouse click, space-bar, or
  20. // using the arrow keys to switch the selected radio button),
  21. // we update the state of the checkbox/radio.
  22. //
  23. // There are two modes:
  24. // 1. High contrast mode
  25. // 2. Normal mode
  26. //
  27. // In case 1, the regular html inputs are shown and used by the user.
  28. // In case 2, the regular html inputs are invisible but still used by
  29. // the user. They are turned quasi-invisible and overlay the background-image.
  30. templateString: dojo.cache("dijit.form", "templates/CheckBox.html", "<div class=\"dijit dijitReset dijitInline\" role=\"presentation\"\n\t><input\n\t \t${!nameAttrSetting} type=\"${type}\" ${checkedAttrSetting}\n\t\tclass=\"dijitReset dijitCheckBoxInput\"\n\t\tdojoAttachPoint=\"focusNode\"\n\t \tdojoAttachEvent=\"onclick:_onClick\"\n/></div>\n"),
  31. baseClass: "dijitCheckBox",
  32. // type: [private] String
  33. // type attribute on <input> node.
  34. // Overrides `dijit.form.Button.type`. Users should not change this value.
  35. type: "checkbox",
  36. // value: String
  37. // As an initialization parameter, equivalent to value field on normal checkbox
  38. // (if checked, the value is passed as the value when form is submitted).
  39. //
  40. // However, get('value') will return either the string or false depending on
  41. // whether or not the checkbox is checked.
  42. //
  43. // set('value', string) will check the checkbox and change the value to the
  44. // specified string
  45. //
  46. // set('value', boolean) will change the checked state.
  47. value: "on",
  48. // readOnly: Boolean
  49. // Should this widget respond to user input?
  50. // In markup, this is specified as "readOnly".
  51. // Similar to disabled except readOnly form values are submitted.
  52. readOnly: false,
  53. // the attributeMap should inherit from dijit.form._FormWidget.prototype.attributeMap
  54. // instead of ToggleButton as the icon mapping has no meaning for a CheckBox
  55. attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, {
  56. readOnly: "focusNode"
  57. }),
  58. _setReadOnlyAttr: function(/*Boolean*/ value){
  59. this._set("readOnly", value);
  60. dojo.attr(this.focusNode, 'readOnly', value);
  61. dijit.setWaiState(this.focusNode, "readonly", value);
  62. },
  63. _setValueAttr: function(/*String|Boolean*/ newValue, /*Boolean*/ priorityChange){
  64. // summary:
  65. // Handler for value= attribute to constructor, and also calls to
  66. // set('value', val).
  67. // description:
  68. // During initialization, just saves as attribute to the <input type=checkbox>.
  69. //
  70. // After initialization,
  71. // when passed a boolean, controls whether or not the CheckBox is checked.
  72. // If passed a string, changes the value attribute of the CheckBox (the one
  73. // specified as "value" when the CheckBox was constructed (ex: <input
  74. // dojoType="dijit.CheckBox" value="chicken">)
  75. if(typeof newValue == "string"){
  76. this._set("value", newValue);
  77. dojo.attr(this.focusNode, 'value', newValue);
  78. newValue = true;
  79. }
  80. if(this._created){
  81. this.set('checked', newValue, priorityChange);
  82. }
  83. },
  84. _getValueAttr: function(){
  85. // summary:
  86. // Hook so get('value') works.
  87. // description:
  88. // If the CheckBox is checked, returns the value attribute.
  89. // Otherwise returns false.
  90. return (this.checked ? this.value : false);
  91. },
  92. // Override dijit.form.Button._setLabelAttr() since we don't even have a containerNode.
  93. // Normally users won't try to set label, except when CheckBox or RadioButton is the child of a dojox.layout.TabContainer
  94. _setLabelAttr: undefined,
  95. postMixInProperties: function(){
  96. if(this.value == ""){
  97. this.value = "on";
  98. }
  99. // Need to set initial checked state as part of template, so that form submit works.
  100. // dojo.attr(node, "checked", bool) doesn't work on IEuntil node has been attached
  101. // to <body>, see #8666
  102. this.checkedAttrSetting = this.checked ? "checked" : "";
  103. this.inherited(arguments);
  104. },
  105. _fillContent: function(/*DomNode*/ source){
  106. // Override Button::_fillContent() since it doesn't make sense for CheckBox,
  107. // since CheckBox doesn't even have a container
  108. },
  109. reset: function(){
  110. // Override ToggleButton.reset()
  111. this._hasBeenBlurred = false;
  112. this.set('checked', this.params.checked || false);
  113. // Handle unlikely event that the <input type=checkbox> value attribute has changed
  114. this._set("value", this.params.value || "on");
  115. dojo.attr(this.focusNode, 'value', this.value);
  116. },
  117. _onFocus: function(){
  118. if(this.id){
  119. dojo.query("label[for='"+this.id+"']").addClass("dijitFocusedLabel");
  120. }
  121. this.inherited(arguments);
  122. },
  123. _onBlur: function(){
  124. if(this.id){
  125. dojo.query("label[for='"+this.id+"']").removeClass("dijitFocusedLabel");
  126. }
  127. this.inherited(arguments);
  128. },
  129. _onClick: function(/*Event*/ e){
  130. // summary:
  131. // Internal function to handle click actions - need to check
  132. // readOnly, since button no longer does that check.
  133. if(this.readOnly){
  134. dojo.stopEvent(e);
  135. return false;
  136. }
  137. return this.inherited(arguments);
  138. }
  139. }
  140. );
  141. dojo.declare(
  142. "dijit.form.RadioButton",
  143. dijit.form.CheckBox,
  144. {
  145. // summary:
  146. // Same as an HTML radio, but with fancy styling.
  147. type: "radio",
  148. baseClass: "dijitRadio",
  149. _setCheckedAttr: function(/*Boolean*/ value){
  150. // If I am being checked then have to deselect currently checked radio button
  151. this.inherited(arguments);
  152. if(!this._created){ return; }
  153. if(value){
  154. var _this = this;
  155. // search for radio buttons with the same name that need to be unchecked
  156. dojo.query("INPUT[type=radio]", this.focusNode.form || dojo.doc).forEach( // can't use name= since dojo.query doesn't support [] in the name
  157. function(inputNode){
  158. if(inputNode.name == _this.name && inputNode != _this.focusNode && inputNode.form == _this.focusNode.form){
  159. var widget = dijit.getEnclosingWidget(inputNode);
  160. if(widget && widget.checked){
  161. widget.set('checked', false);
  162. }
  163. }
  164. }
  165. );
  166. }
  167. },
  168. _clicked: function(/*Event*/ e){
  169. if(!this.checked){
  170. this.set('checked', true);
  171. }
  172. }
  173. }
  174. );
  175. }