Blog

checkboxのindeterminate状態

2019.06.11Cat:Blog javascript jQuery 制作

普通の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

ShuTzuyu
台湾出身のシュウです。 大学は情報管理と国際企業を専攻、2015年卒業後、来日。 アニメとデザインが好きです。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ