indeterminate選擇器怎么用

今天小編給大家分享一下indeterminate選擇器怎么用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　:indeterminate選擇器簡單介紹

　　:indeterminate是一個CSS偽類選擇器，是用于選擇處于不確定狀態的用戶界面元素的。

　　例如，radio和checkbox元素可以在選中狀態和未選中狀態之間切換，但有時處于不確定狀態，既不選中也不取消選中。類似地，還有HTML5<progress>標簽，當完成的百分比未知時，進度條（<progress>）可以處于不確定狀態。

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

　　1、復選按鈕（<inputtype="checkbox">），其indeterminate屬性設置為true。

　　2、單選按鈕（<inputtype="radio">），在表單中擁有相同name值的單選按鈕組中未被選中時單選按鈕。

　　3、沒有value屬性的進度條元素（<progress>標簽）。progress標簽元素是一個HTML5元素，用于表示任務的完成進度。

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

　　2.jpg

　　注：元素的不確定狀態只能通過JavaScript來動態設置。上面提到的indeterminate屬性只能和JavaScript一起應用，這意味著不能像下面這樣通過HTML將元素的狀態設置為不確定：

　　<inputtype="checkbox"indeterminate><!--如果我們通過HTML添加它，則不起作用-->

　　要將元素設置為不確定狀態，您只能通過JavaScript執行此操作。例如，如果頁面中有一組復選框，則以下行將選擇第一行并將其狀態更改為不確定狀態：

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

　　示例：嵌套的復選框

　　將復選框的狀態（和樣式）設置為不確定可能有用的一個用例是，當我們嵌套復選框時，讓一個復選框具有了子復選框。通常是在提供多種選擇的用戶界面中看到這種情況，并且某些選項具有“子選項”。

　　通常，設置“父”復選框，以便它可用于切換其所有子復選框的樣式-檢查它將檢查所有子項，取消選中它將取消選中所有子項。取消選中它將允許用戶檢查子復選框中的一些選項，同時保留其他選項未選中。

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

　　一組嵌套的復選框中，當我們選中一個子選項時，“父”復選框的狀態為“不確定”

　　3.jpg

　　當我們選擇2個子選項時，“父”復選框的狀態還是為“不確定”

　　4.jpg

　　只有，當所有子選項都被選中是，父”復選框的狀態才會為“選中”

　　5.jpg

　　嵌套的復選框的代碼：

　　如果復選框的標簽處于不確定狀態，則父復選框標簽的顏色將變為deepPink。

　　HTML代碼：

　　<divclass="container">

　　<ul>

　　<li>

　　<inputtype="checkbox"id="option"><labelfor="option">選擇喜歡的水果</label>

　　<ul>

　　<li><label><inputtype="checkbox"class="subOption">蘋果、香蕉、橘子</label></li>

　　<li><label><inputtype="checkbox"class="subOption">柚子、橙子、西瓜</label></li>

　　<li><label><inputtype="checkbox"class="subOption">芒果、火龍果、哈密瓜</label></li>

　　</ul>

　　</li>

　　</ul>

　　</div>

　　css代碼：

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

　　varcheckboxes=document.querySelectorAll('input.subOption'),

　　checkall=document.getElementById('option');

　　for(vari=0;i<checkboxes.length;i++){

　　checkboxes[i].onclick=function(){

　　varcheckedCount=document.querySelectorAll('input.subOption:checked').length;

　　checkall.checked=checkedCount>0;

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

　　}

　　}

　　checkall.onclick=function(){

　　for(vari=0;i<checkboxes.length;i++){

　　checkboxes[i].checked=this.checked;

　　}

　　}

以上就是“indeterminate選擇器怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。