はじめに
この記事は <input type="radio"> で作成されるラジオボタンの選択解除についての記事です。そもそも、「ラジオボタンでは選択解除をしない」とか、「選択解除するならチェックボックスを使う」とか、ラジオボタンの選択解除については色々考えがあるとは思います。そんな中でこの記事は、何が何でもラジオボタンの選択解除ができるようにしたい人向けの記事となっています。
ラジオボタンの選択解除方法
ラジオボタンの選択解除をする方法として以下のような方法が考えられます。
- 選択解除用のボタンを用意して、そのボタンをクリックした時にラジオボタンの選択を解除する
- 選択されているラジオボタンを再選択することで選択を解除する
1.の場合
利点
- 処理がシンプル
- ラジオボタンの選択解除が可能であることを示せる
欠点
- 新たな要素の追加が必要、UIの変更が生じることも
2.の場合
利点
- カスタマイズされたUIをそのまま利用できる
- 直感的に選択・選択解除の操作が行える
欠点
- カスタマイズされていない生の状態のラジオボタンだと選択解除ができるとは気づき辛い
- （今回実装した）処理があまりスマートではない
実装例
選択解除用のボタンをクリックした時にラジオボタンの選択を解除
選択解除ボタンを押した際に、:checkedの疑似クラスを持つラジオボタンの選択を解除するようにしています。
See the Pen ボタンでの選択解除 by Jnuu (@jnuu) on CodePen.
ラジオボタンの再選択による選択解除
ラジオボタンをクリックした時に、そのラジオボタンがis-checkedクラスを含んでいれば選択を解除し、そうでなければis-checkedクラスを含む要素のis-checkedクラスを削除し、クリックしたラジオボタンにis-checkedクラスを付与します。
clickイベントの発火時にchecked属性は既にtrueとなっているため、checked属性の値を用いた処理ではなくis-checkedクラスによってチェックしているかを管理する方針を取っています。
See the Pen ラジオボタンの選択解除 by Jnuu (@jnuu) on CodePen.
カスタマイズしたラジオボタンの選択解除
ラジオボタンのスタイルを変更しラジオボタンっぽさを無くした場合、再選択による選択解除のありがたみがわかりやすいです。
See the Pen カスタムしたラジオボタンの選択解除 by Jnuu (@jnuu) on CodePen.
おわりに
今回は選択解除ができるラジオボタンを作成しました。選択解除をラジオボタンでできるようにしたい方は参考にしてみてください。
また，この記事の正しくない箇所，もっとスマートな選択解除の方法等があれば是非お教えください！