checkboxのindeterminate状態

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

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

使い方

JavaScript

var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;

1 2	var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;

jQuery

$("#some-checkbox").prop("indeterminate", true); //jQuery 1.6+

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の変換できるようにイデアがあります。
リンク
一応ご参考に

WRITER

スターフィールド編集部

この著者の記事を見る