diff --git a/files/en-us/web/api/htmlinputelement/indeterminate/index.md b/files/en-us/web/api/htmlinputelement/indeterminate/index.md new file mode 100644 index 000000000000000..1239df32e6454b3 --- /dev/null +++ b/files/en-us/web/api/htmlinputelement/indeterminate/index.md @@ -0,0 +1,47 @@ +--- +title: "HTMLInputElement: indeterminate property" +short-title: indeterminate +slug: Web/API/HTMLInputElement/indeterminate +page-type: web-api-instance-property +browser-compat: api.HTMLInputElement.indeterminate +--- + +{{APIRef("HTML DOM")}} + +The **`indeterminate`** property of the {{domxref("HTMLInputElement")}} interface returns a boolean value that indicates whether the checkbox is in the _indeterminate_ state. For example, a "select all/deselect all" checkbox may be in the indeterminate state when some but not all of its sub-controls are checked. The `indeterminate` state can only be set via JavaScript and is only relevant to [`checkbox`](/en-US/docs/Web/HTML/Element/input/checkbox) controls. + +It is unrelated to the {{domxref("HTMLInputElement.checked")}} property, and an indeterminate checkbox can be either checked or unchecked. Being indeterminate only affects the checkbox's appearance (see example below), not its presence when submitted (which is controlled by the checkedness). + +## Value + +A boolean. + +## Examples + +```html + + +``` + +```js +const checkbox = document.getElementById("indeterminate-checkbox"); +checkbox.indeterminate = true; +``` + +{{EmbedLiveSample("examples", "", 200)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLInputElement")}} +- {{domxref("HTMLInputElement.checked")}} +- {{HTMLElement("input")}} +- [Indeterminate state checkboxes](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) +- CSS {{cssxref(":indeterminate")}} property diff --git a/files/en-us/web/css/_colon_indeterminate/index.md b/files/en-us/web/css/_colon_indeterminate/index.md index 3e4cf35810e756a..1862a64c0ebc8d4 100644 --- a/files/en-us/web/css/_colon_indeterminate/index.md +++ b/files/en-us/web/css/_colon_indeterminate/index.md @@ -7,7 +7,7 @@ browser-compat: css.selectors.indeterminate {{CSSRef}} -The **`:indeterminate`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any form element whose state is indeterminate, such as checkboxes that have been set to an [`indeterminate`](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) state with JavaScript, radio buttons which are members of a group in which all radio buttons are unchecked, and {{HTMLElement("progress")}} elements with no `value` attribute. +The **`:indeterminate`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any form element whose state is indeterminate, such as checkboxes that have been set to an [`indeterminate`](/en-US/docs/Web/API/HTMLInputElement/indeterminate) state with JavaScript, radio buttons which are members of a group in which all radio buttons are unchecked, and {{HTMLElement("progress")}} elements with no `value` attribute. ```css /* Selects any whose state is indeterminate */ @@ -18,7 +18,7 @@ input:indeterminate { Elements targeted by this selector are: -- [``](/en-US/docs/Web/HTML/Element/input/checkbox) elements whose `indeterminate` property is set to `true` by [JavaScript](/en-US/docs/Web/JavaScript) +- [``](/en-US/docs/Web/HTML/Element/input/checkbox) elements whose [`indeterminate`](/en-US/docs/Web/API/HTMLInputElement/indeterminate) property is set to `true` - [``](/en-US/docs/Web/HTML/Element/input/radio) elements, when all radio buttons with the same `name` value in the form are unchecked - {{HTMLElement("progress")}} elements in an indeterminate state @@ -131,6 +131,6 @@ progress:indeterminate { - [Web forms — Working with user data](/en-US/docs/Learn/Forms) - [Styling web forms](/en-US/docs/Learn/Forms/Styling_web_forms) -- The [``](/en-US/docs/Web/HTML/Element/input/checkbox) element's [`indeterminate`](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) property +- The [``](/en-US/docs/Web/HTML/Element/input/checkbox) element's [`indeterminate`](/en-US/docs/Web/API/HTMLInputElement/indeterminate) property - {{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it. - The {{cssxref(":checked")}} CSS selector lets you style checkboxes based on whether they're checked or not diff --git a/files/en-us/web/html/element/input/checkbox/index.md b/files/en-us/web/html/element/input/checkbox/index.md index 1fb6024f771b49b..669e8c0443ca831 100644 --- a/files/en-us/web/html/element/input/checkbox/index.md +++ b/files/en-us/web/html/element/input/checkbox/index.md @@ -111,7 +111,7 @@ Beyond accessibility, this is another good reason to properly set up `