How to use css: indeterminate selector

This article will introduce to you the use of indeterminate selector in CSS and which elements it can be used in. Let’s look at the specific content below.

: A brief introduction to the indeterminate selector

: Indeterminate is a CSS pseudo-class selector, which is Used for selecting user interface elements that are in an indeterminate state.

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

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

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

2. Radio button (), when the radio button is not selected in the radio button group with the same name value in the form.

3. Progress bar element ( tag) without value attribute. The progress tag element is an HTML5 element used to indicate the completion progress of a task.

It can be said that the indeterminate state of an element is a visual state. The following are the three states of the check box: checked, unchecked and indeterminate:

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 you cannot set the state of an element to indeterminate via HTML like this:

<input type="checkbox" indeterminate> <!-- 如果我们通过HTML添加它，则不起作用 -->

To set an element to an indeterminate state, you can only Do this via JavaScript. For example, if there is a set of checkboxes in the page, the following line will select the first row and change its status to indeterminate:

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

Example: Nested Checkboxes

One use case where setting the state (and style) of a checkbox to undefined might be useful is when we nest checkboxes, so that one checkbox has child checkboxes. marquee. You typically see this in user interfaces that offer multiple choices, and some options have "sub-options".

Typically, set the "parent" checkbox so that it can be used to toggle the style of all of its child checkboxes - checking it will check all children, unchecking it will uncheck all children. Unchecking it will allow the user to check some options in the sub-checkbox while leaving other options unchecked.

So using this concept you can check if a checkbox has all descendants checkboxes checked and if all descendants checkboxes are not checked then the status of that "parent" checkbox is undefined e.g. :

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

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

Only, when all sub-options are selected , the status of the "parent" check box will be "selected"

Code for nested check boxes:

If the label of the check box In an indeterminate state, the color of the parent checkbox label will become deepPink.

HTML code:

<div class="container">
  <ul>
    <li>
      <input type="checkbox" id="option"><label for="option"> 选择喜欢的水果</label>
      <ul>
        <li><label><input type="checkbox" class="subOption"> 苹果、香蕉、橘子</label></li>
        <li><label><input type="checkbox" class="subOption"> 柚子、橙子、西瓜</label></li>
        <li><label><input type="checkbox" class="subOption"> 芒果、火龙果、哈密瓜</label></li>
      </ul>
    </li>
  </ul>
</div>

css code:

ul {
  list-style: none;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

li {
  margin-top: 1em;
}

label {
  font-weight: bold;
}

input[type="checkbox"]:indeterminate + label {
  color: deepPink;
}

js code:

var checkboxes = document.querySelectorAll('input.subOption'),
    checkall = document.getElementById('option');

for(var i=0; i<checkboxes.length; i++) {
  checkboxes[i].onclick = function() {
    var checkedCount = document.querySelectorAll(&#39;input.subOption:checked&#39;).length;

    checkall.checked = checkedCount > 0;
    checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
  }
}

checkall.onclick = function() {
  for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
}

Dynamic renderings:

Summary: The above is the entire content of this article, I hope it can be helpful to everyone’s learning Helped.

The above is the detailed content of How to use css: indeterminate selector. For more information, please follow other related articles on the PHP Chinese website!