Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use the indeterminate selector. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

A brief introduction to indeterminate selector

Indeterminate is a CSS pseudo-class selector that is used to select user interface elements in an uncertain state

For example, radio and checkbox elements can switch between selected and unchecked states, but are sometimes in an indeterminate state, neither checked nor unchecked. Similarly, there is the HTML5 tag, where the progress bar () can be in an uncertain state when the percentage of completion is unknown.

Therefore, specifically, the indeterminate pseudo-class selector can be used in the following elements:

1. Check button (), whose indeterminate property is set to true.

2. Radio button (), if it is not selected in a group of radio buttons with the same name value in the form.

3. Progress bar element (tag) without value attribute. The progress tag element is a HTML5 element that indicates the progress of a task.

It can be said that the uncertain state of an element is a visual state, and the following are the three states of the check box: selected, unselected, and uncertain:

2.jpg

Note: the uncertain state of an element can only be set dynamically through JavaScript. The indeterminate attribute mentioned above can only be applied with JavaScript, which means that the state of an element cannot be set to indeterminate through HTML as follows:

To set an element to an indeterminate state, you can only do this through JavaScript. For example, if there is a set of check boxes on the page, the following line selects the first row and changes its status to indeterminate:

Document.getElementsByTagName ("input") [0] .indeterminate = true

Example: nested check boxes

One use case where setting the status (and style) of the check box to uncertainty might be useful is to have a check box with a child check box when we nest the check box. You usually see this in a user interface that provides multiple choices, and some options have "sub-options."

Typically, set the parent check box so that it can be used to toggle the style of all its child check boxes-checking it will check all children, and unchecking it will deselect all children. Unchecking it allows the user to check some of the options in the subcheck box while leaving others unselected.

Therefore, using this concept, you can check whether the check box has all descendant check boxes selected, and if all descendant check boxes are not selected, the status of the parent check box is uncertain, for example:

In a set of nested check boxes, when we select a child option, the status of the parent check box is uncertain

3.jpg

When we select 2 child options, the status of the parent check box is still "uncertain"

4.jpg

The status of the parent check box is selected only when all child options are selected.

5.jpg

The code for the nested check box:

If the label of the check box is indeterminate, the color of the parent check box label changes to deepPink.

HTML Code:

Choose the fruit you like

Apples, bananas, oranges

Grapefruit, orange, watermelon

Mango, dragon fruit, cantaloupe

Css Code:

Ul {

List-style:none

}

.container {

Margin:40pxauto

Max-width:700px

}

Li {

Margin-top:1em

}

Label {

Font-weight:bold

}

Input [type= "checkbox"]: indeterminate+label {

Color:deepPink

}

Js Code:

Varcheckboxes=document.querySelectorAll ('input.subOption')

Checkall=document.getElementById ('option')

For (vari=0;i0

Checkall.indeterminate=checkedCount > 0&&checkedCount

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.