めも

メモ.

HTMLのチェックボックスの状態数を3つにする・チェックされた値を取得する

やりたいこと

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

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

解決法

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

一部引用すると以下のコードで三つの状態を持つチェックボックスを作ることができる。動作確認は 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を指定しただけでは三つの状態を順繰りに行き来することはできない。

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()

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

プライバシーポリシー

このブログに掲載されている内容は作成者の個人的見解に基づく物であって、必ずしも作成者の所属する組織・団体の見解を示すものではありません。また、記載が不正確であったことにより生じたいかなる損害に関しても、責任を負いかねますのでご了承ください。また、本サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。また、本サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net)を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー(Cookie)を使用しております。 クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。本サイトの管理者への問い合わせ、当ブログのプライバシーポリシーの詳細についてはこちらをご覧ください。