From 7ebfa828ce6e8da5fb53781774b40c4a26c0201b Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 19 Sep 2024 20:35:55 -0400 Subject: [PATCH 1/5] New page for HTMLInputElement.indeterminate --- .../htmlinputelement/indeterminate/index.md | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 files/en-us/web/api/htmlinputelement/indeterminate/index.md 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..2b1ff9bed55b813 --- /dev/null +++ b/files/en-us/web/api/htmlinputelement/indeterminate/index.md @@ -0,0 +1,43 @@ +--- +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. It is unrelated to the {{domxref("HTMLInputElement.checked")}} property, and an indeterminate checkbox can be either checked or unchecked. The `indeterminate` state can only be set via JavaScript, and only affects the checkbox's appearance, not its value when submitted. + +## 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("HTMLFormElement.checked")}} +- {{HTMLElement("input")}} From bc36fa765ebc2bfa155375f683957bd532e44062 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 19 Sep 2024 21:00:11 -0400 Subject: [PATCH 2/5] Update index.md --- files/en-us/web/api/htmlinputelement/indeterminate/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/api/htmlinputelement/indeterminate/index.md b/files/en-us/web/api/htmlinputelement/indeterminate/index.md index 2b1ff9bed55b813..244096892560692 100644 --- a/files/en-us/web/api/htmlinputelement/indeterminate/index.md +++ b/files/en-us/web/api/htmlinputelement/indeterminate/index.md @@ -8,7 +8,9 @@ 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. It is unrelated to the {{domxref("HTMLInputElement.checked")}} property, and an indeterminate checkbox can be either checked or unchecked. The `indeterminate` state can only be set via JavaScript, and only affects the checkbox's appearance, not its value when submitted. +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 value when submitted (which is controlled by the checkedness). ## Value From 3522f71fb64d5e7b97123899148b1dce9aee9fdc Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Thu, 19 Sep 2024 21:00:44 -0400 Subject: [PATCH 3/5] Update index.md --- files/en-us/web/api/htmlinputelement/indeterminate/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/htmlinputelement/indeterminate/index.md b/files/en-us/web/api/htmlinputelement/indeterminate/index.md index 244096892560692..cf1ea37fda8c245 100644 --- a/files/en-us/web/api/htmlinputelement/indeterminate/index.md +++ b/files/en-us/web/api/htmlinputelement/indeterminate/index.md @@ -41,5 +41,5 @@ checkbox.indeterminate = true; ## See also - {{domxref("HTMLInputElement")}} -- {{domxref("HTMLFormElement.checked")}} +- {{domxref("HTMLInputElement.checked")}} - {{HTMLElement("input")}} From 6a5f8b195f14135e70c01cd86983c5d0d160fc9f Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Fri, 20 Sep 2024 02:03:32 -0400 Subject: [PATCH 4/5] Add links --- files/en-us/web/api/htmlinputelement/indeterminate/index.md | 2 ++ files/en-us/web/css/_colon_indeterminate/index.md | 6 +++--- files/en-us/web/html/element/input/checkbox/index.md | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/api/htmlinputelement/indeterminate/index.md b/files/en-us/web/api/htmlinputelement/indeterminate/index.md index cf1ea37fda8c245..74733c8e3a82560 100644 --- a/files/en-us/web/api/htmlinputelement/indeterminate/index.md +++ b/files/en-us/web/api/htmlinputelement/indeterminate/index.md @@ -43,3 +43,5 @@ checkbox.indeterminate = true; - {{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 `