今天小編給大家分享一下indeterminate選擇器怎么用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
淮陽(yáng)網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),淮陽(yáng)網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為淮陽(yáng)千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的淮陽(yáng)做網(wǎng)站的公司定做！
:indeterminate選擇器簡(jiǎn)單介紹
:indeterminate是一個(gè)CSS偽類(lèi)選擇器，是用于選擇處于不確定狀態(tài)的用戶界面元素的。
例如，radio和checkbox元素可以在選中狀態(tài)和未選中狀態(tài)之間切換，但有時(shí)處于不確定狀態(tài)，既不選中也不取消選中。類(lèi)似地，還有HTML5
因此，可以具體地說(shuō)，:indeterminate偽類(lèi)選擇器可以在以下元素中使用：
1、復(fù)選按鈕（
2、單選按鈕（
3、沒(méi)有value屬性的進(jìn)度條元素（
可以說(shuō)元素的不確定狀態(tài)是一種視覺(jué)狀態(tài)，下面是復(fù)選框的三種狀態(tài)：已選中，未選中和不確定：
2.jpg
注：元素的不確定狀態(tài)只能通過(guò)JavaScript來(lái)動(dòng)態(tài)設(shè)置。上面提到的indeterminate屬性只能和JavaScript一起應(yīng)用，這意味著不能像下面這樣通過(guò)HTML將元素的狀態(tài)設(shè)置為不確定：
要將元素設(shè)置為不確定狀態(tài)，您只能通過(guò)JavaScript執(zhí)行此操作。例如，如果頁(yè)面中有一組復(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)為“不確定”
3.jpg
當(dāng)我們選擇2個(gè)子選項(xiàng)時(shí)，“父”復(fù)選框的狀態(tài)還是為“不確定”
4.jpg
只有，當(dāng)所有子選項(xiàng)都被選中是，父”復(fù)選框的狀態(tài)才會(huì)為“選中”
5.jpg
嵌套的復(fù)選框的代碼：
如果復(fù)選框的標(biāo)簽處于不確定狀態(tài)，則父復(fù)選框標(biāo)簽的顏色將變?yōu)閐eepPink。
HTML代碼：
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[i].onclick=function(){ varcheckedCount=document.querySelectorAll('input.subOption:checked').length; checkall.checked=checkedCount>0; checkall.indeterminate=checkedCount>0&&checkedCount } } checkall.onclick=function(){ for(vari=0;i checkboxes[i].checked=this.checked; } } 以上就是“indeterminate選擇器怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前文章：indeterminate選擇器怎么用
本文來(lái)源：http://weahome.cn/article/jppgho.html
重慶分公司
重慶分公司
