首頁  >  文章  >  web前端  >  css如何使用:indeterminate選擇器

css如何使用:indeterminate選擇器

青灯夜游
青灯夜游原創
2018-11-29 14:49:473592瀏覽

這篇文章跟大家介紹一下在css中:indeterminate選擇器有什麼用,可以在哪些元素中使用。下面我們就來看具體的內容。

css如何使用:indeterminate選擇器

:indeterminate選擇器簡單介紹

:indeterminate是CSS 偽類別選擇器,是用於選擇處於不確定狀態的使用者介面元素的。

例如,radio和checkbox元素可以在選取狀態和未選取狀態之間切換,但有時處於不確定狀態,且既不選取也不取消選取。類似地,也有HTML5 標籤,當完成的百分比未知時,進度條()可以處於不確定狀態。

因此,可以具體地說,:indeterminate偽類選擇器可以在以下元素中使用:

1、複選按鈕(),其indeterminate屬性設定為true。

2、單選按鈕(),在表單中擁有相同name值的單選按鈕群組中未被選取時單選按鈕。

3、沒有value屬性的進度條元素(標籤)。 progress標籤元素是一個HTML5元素,用來表示任務的完成進度。

可以說元素的不確定狀態是一種視覺狀態,下面是複選框的三種狀態:已選中,未選中和不確定:

css如何使用:indeterminate選擇器

附註:元素的不確定狀態只能透過JavaScript來動態設定。上述的indeterminate屬性只能和JavaScript一起套用,這表示不能像下面這樣透過HTML將元素的狀態設為不確定:

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

要將元素設為不確定狀態,您只能透過JavaScript執行此操作。例如,如果頁面中有一組複選框,則以下行將選擇第一行並將其狀態變更為不確定狀態:

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

範例:嵌套的複選框

將複選框的狀態(和樣式)設為不確定可能有用的用例是,當我們嵌套複選框時,讓一個複選框具有了子復選框。通常是在提供多種選擇的使用者介面中看到這種情況,並且某些選項具有“子選項”。

通常,設定「父」複選框,以便它可用於切換其所有子復選框的樣式 - 檢查它將檢查所有子項,取消選取它將取消選取所有子項。取消選取它將允許使用者檢查子複選框中的一些選項,同時保留其他選項未選取。

因此,使用此概念,可以檢查複選框是否選中了所有後代複選框,如果未選中所有後代複選框,則該“父”複選框的狀態為不確定,例如:

一組巢狀的複選框中,當我們選取一個子選項時,「父」複選框的狀態為「不確定」

css如何使用:indeterminate選擇器

當我們選擇2個子選項時,「父」複選框的狀態還是為「不確定」

css如何使用:indeterminate選擇器

#只有,當所有子選項都被選中是,父」複選框的狀態才會為「選取」

css如何使用:indeterminate選擇器

巢狀的複選框的程式碼:

如果複選框的標籤處於不確定狀態,則父複選框標籤的顏色將變為deepPink。

HTML代碼:

<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代碼:

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程式碼:

var checkboxes = document.querySelectorAll(&#39;input.subOption&#39;),
    checkall = document.getElementById(&#39;option&#39;);

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;
  }
}

動態效果圖:

css如何使用:indeterminate選擇器

#總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。

以上是css如何使用:indeterminate選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn