input checkbox屬性-Indeterminate狀態

咱們在使用input標籤，多選框時，一般會看到兩種狀態，即選中(checked)和被選中(unchecked)。

// 選中狀態也可寫成checked="checked"
checked:<input type="checkbox" checked>
// 未選中狀態不寫便可
unchecked:<input type="checkbox" unchecked>

 

可是對於checkbox還有一種模糊狀態，這種狀態在哪裏會看到呢，若是你用過QQ郵箱的話，相信你會看到，但有可能會忽略這個細節，如QQ郵箱中效果：

 

那麼這種效果是怎麼實現的呢。indeterminate既爲checkbox中的一個屬性必然能夠被js控制，因此能夠用js來控制現有狀態。

<input id="check" type="checkbox">
<script>
var Check = document.getElementById('check');
Check.indeterminate = true;
</script>

 

出現的效果同QQ郵箱中效果同樣，如下爲不一樣瀏覽器中indeterminate狀態顯示狀況：

IE(10):

 

firefox:

chrome:

值得注意的是，雖然indeterminate貴爲checkbox的屬性，但在html中單獨使用並不會出現效果。而且indeterminate只會對checkbox的樣子發生改變，也就是說與真正的取值並沒有關係。