Halo teman-teman pada kesempatan kali ini saya akan mengenalkan :indeterminate pada pseudo-class selector. :indeterminate pada pseudo-class digunakan untuk memilih elemen antarmuka pengguna yang dalam keadaan tak tentu. Misalnya, radio dan kotak centang elemen dapat diubah antara statement diperiksa dan dicentang, tapi kadang-kadang dalam keadaan tak tentu, tidak diperiksa atau dicentang. Demikian pula, progres (<progress>) dapat berada dalam keadaan tak tentu ketika persen selesai tidak diketahui.

Secara khusus :indeterminate pada pseudo-class memilih element seperti berikut,

  • Checkboxes (<input type=”checkbox”>)
  • Radio buttons (<input type=”radio”>)

Keadaan tak tentu dari elemen dapat diatur hanya melalui JavaScript. Atribut tak tentu yang disebutkan di atas hanya tersedia dan berlaku di JavaScript, yang berarti bahwa Anda tidak dapat mengatur state elemen untuk tak tentu melalui HTML seperti:

Untuk mengatur elemen untuk sebuah state tak tentu, Anda hanya dapat melakukannya melalui JavaScript. Misalnya, jika Anda memiliki satu set kotak centang di halaman, baris berikut akan memilih yang pertama dan mengubah keadaan ke keadaan tak tentu:

Gunakan Kasus: Bersarang Checkbox

Orang mungkin bertanya-tanya bagaimana atau kapan :indeterminate akan berguna, atau ketika salah satu mungkin ingin mengatur state kotak centang, misalnya, menjadi tak tentu.

Sebuah kotak centang dapat baik diperiksa atau dicentang. Itu sebenarnya secara harfiah benar. Bahkan jika state checkbox diatur untuk tak tentu, gaya visual kotak centang akan berubah, namun keadaan yang mendasari masih akan baik diperiksa atau dicentang.

Jadi, visual berbicara, checkbox dapat memiliki tiga state: diperiksa, dicentang, atau tak tentu. (Sekali lagi, keadaan tak tentu adalah visual saja.)

Gambar berikut menunjukkan bagaimana kotak centang akan terlihat di salah satu dari tiga state di Chrome di Windows.

Jadi, gunakan salah satu kasus di mana hal ini mungkin berguna untuk mengatur negara kotak centang (dan gaya) untuk tak tentu adalah ketika Anda telah bersarang centang, di mana kotak centang memiliki kotak centang anak. Anda dapat melihat ini biasanya antarmuka pengguna yang menawarkan beberapa pilihan, dan di mana beberapa pilihan memiliki “sub-pilihan”. Semoga bermanfaat.