小編給大家分享一下css使用:indeterminate選擇器的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

站在用戶的角度思考問題，與客戶深入溝通，找到武陵源網(wǎng)站設(shè)計(jì)與武陵源網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋武陵源地區(qū)。

:indeterminate選擇器簡單介紹

:indeterminate是一個(gè)CSS 偽類選擇器，是用于選擇處于不確定狀態(tài)的用戶界面元素的。

例如，radio和checkbox元素可以在選中狀態(tài)和未選中狀態(tài)之間切換，但有時(shí)處于不確定狀態(tài)，既不選中也不取消選中。類似地，還有HTML5 標(biāo)簽，當(dāng)完成的百分比未知時(shí)，進(jìn)度條（）可以處于不確定狀態(tài)。

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

1、復(fù)選按鈕（），其indeterminate屬性設(shè)置為true。

2、單選按鈕（），在表單中擁有相同name值的單選按鈕組中未被選中時(shí)單選按鈕。

3、沒有value屬性的進(jìn)度條元素（標(biāo)簽）。progress標(biāo)簽元素是一個(gè)HTML5元素，用于表示任務(wù)的完成進(jìn)度。

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

注：元素的不確定狀態(tài)只能通過JavaScript來動(dòng)態(tài)設(shè)置。上面提到的indeterminate屬性只能和JavaScript一起應(yīng)用，這意味著不能像下面這樣通過HTML將元素的狀態(tài)設(shè)置為不確定：

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

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

示例：嵌套的復(fù)選框

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

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

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

一組嵌套的復(fù)選框中，當(dāng)我們選中一個(gè)子選項(xiàng)時(shí)，“父”復(fù)選框的狀態(tài)為“不確定”

當(dāng)我們選擇2個(gè)子選項(xiàng)時(shí)，“父”復(fù)選框的狀態(tài)還是為“不確定”

只有，當(dāng)所有子選項(xiàng)都被選中是，父”復(fù)選框的狀態(tài)才會(huì)為“選中”

嵌套的復(fù)選框的代碼：

如果復(fù)選框的標(biāo)簽處于不確定狀態(tài)，則父復(fù)選框標(biāo)簽的顏色將變?yōu)閐eepPink。

HTML代碼：

  

    

       選擇喜歡的水果
      

        
 蘋果、香蕉、橘子
        
 柚子、橙子、西瓜
        
 芒果、火龍果、哈密瓜
      
    
  

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('input.subOption'),
    checkall = document.getElementById('option');

for(var i=0; i 0;
    checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
  }
}

checkall.onclick = function() {
  for(var i=0; i
動(dòng)態(tài)效果圖：
以上是css使用:indeterminate選擇器的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
            
            
                        

            新聞標(biāo)題：css使用:indeterminate選擇器的方法            

            當(dāng)前網(wǎng)址：http://weahome.cn/article/pcdeds.html