STERFIELD

checkboxのindeterminate状態

checkboxのindeterminate状態

普通のcheckboxはこういう感じで表示されてます。


実はcheckboxはcheckedだけじゃなかったです。
三つのステータスがあります。
indeterminateというプロパティです。
Unchecked
Checked
Indeterminate

使い方

JavaScript

jQuery

注意点

checkedはtrueとfalseどっちもなれる

クリックするとindeterminateがはずれるだけじゃなくてcheckedも切り替わる

indeterminate状態のチェックボックスをクリックした場合の動きはindeterminateがはずれてcheckedの状態が反対になります

indeterminate:true checked:true
クリック
indeterminate:false checked:false
クリック
indeterminate:false checked:true

indeterminate:true checked:false
クリック
indeterminate:false checked:true
クリック
indeterminate:false checked:false
クリック
indeterminate:false checked:true

indeterminateはあくまで見た目優先なものだから、Formに使われたら、POSTの結果はcheckedで判定します。

このサイトにjQueryでクリックするとunchecked、indeterminate、checkedの変換できるようにイデアがあります。
リンク
一応ご参考に

Author Profile

著者近影

スターフィールド編集部

SHARE

合わせて読みたい