2019/06/12
checkboxのindeterminate状態

普通のcheckboxはこういう感じで表示されてます。
1 2 | <input type="checkbox"> <input type="checkbox" checked> |
実はcheckboxはcheckedだけじゃなかったです。
三つのステータスがあります。
indeterminateというプロパティです。
Unchecked
Checked
Indeterminate
使い方
JavaScript
1 2 | var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true; |
jQuery
1 | $("#some-checkbox").prop("indeterminate", true); //jQuery 1.6+ |
注意点
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