やりたいこと

<input type="checkbox" value="15" ... />

などとしたチェックボックスは通常チェックしたかしてないかの二つの状態しか取れない。しかしここを「チェックしてない、チェック１にした、チェック２にした」の三つの状態をチェックできるようにしたい。

解決法

以下のサイト様似て解決法が示されていた。

一部引用すると以下のコードで三つの状態を持つチェックボックスを作ることができる。動作確認は Android3.1, Mac上のChrome 68.0.3440.106にて。

<input type="checkbox" id="cb1" onclick="ts(this)">

function ts(cb) {
  if (cb.readOnly) cb.checked=cb.readOnly=false;
  else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
}

※上記コードは css-tricks.com の一部より抜粋

関連する質問ではチェックボックスのindeterminateを指定する方法が挙げられているが、indeterminateを指定しただけでは三つの状態を順繰りに行き来することはできない。

見た目だけチェックを入れるだけではなくて javascript 側でチェックした箇所の値を取得して何らかの操作をしたい。しかし

<input type="checkbox" value="15" class="chb" onclick="xxx">

$(this).children('.chb:checked').val()) // checkされた要素のvalueのみ取ってくる

のようにしてcheckedとなったチェックボックスの値を取ってくることはできても indeterminateになっているチェックボックスの値を

$(this).children('.chb:indeterminate').val())

として取得することはできなかった。なので

$(this).children('.chb').filter(function(){ return this.indeterminate}).val()

としてこの問題を回避した。