はじめに
WEBシステムで、3段階のチェックボックスを作ろうと思います。
調べてみる
どこを調べても、javascriptでindeterminateをtrueにすれば良いという情報ばかりでした。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="checkbox" />
<input type="checkbox" checked/>
<input type="checkbox" id="chkIndeterminate"/>
</body>
<script type="text/javascript">
document.getElementById('chkIndeterminate').indeterminate = true;
</script>
</html>
CSSだけで何とかしたい…
CSSだけで作ってみる
See the Pen Untitled by masayasu_t (@cjlsrdxi-the-builder) on CodePen.
チェックボックスに見えますが、正体はラジオボタンです。
非表示にしている要素を表示すると、このようになっています。
チェックなし状態と左、チェックあり状態と真ん中、3ステータス状態と右のラジオボタンがリンクしています。
そして、右のラジオボタンにチェックが入っているときは、チェックなし状態を表示（チェックあり状態と3ステータス状態は非表示）
左のラジオボタンにチェックが入っているときは、チェックあり状態を表示（チェックなし状態と3ステータス状態は非表示）
真ん中のラジオボタンにチェックが入っているときは、3ステータス状態を表示（チェックなし状態とチェックあり状態は非表示）
おわりに
このやり方を用いると4段階以上のチェックボックス？が作れます。
デザインのバリエーションを増やすために作ってみましたが、使い勝手は微妙です