Blog

【jQuery】デザインしたチェックボックスをラジオボタンのような動きにする

2014.07.15Cat:javascript jQuery デザイナー

選択項目を選択させるフォームの要素として、

ラジオボタンは、1つの項目を選択させるときに使われ、チェック後、チェックをはずすことはできません。

チェックボックスは1つもしくは複数選択させるときに使われ、チェック後にチェックをはずすことができます。

 

ラジオボタンのように1つだけ選択させるようにしたいけど、選択をはず競るようにしたい場合、

セレクトボックスという選択肢もありますが、デザイン上、選択時以外でも項目を並べて表示したい場合には、

チェックボックスをラジオボタンのように振る舞わせたいということがあります。

 

その方法について調べてみましたので、

ご紹介いたします。

 

↓コチラがDEMOです

DEMO

 

参考にさせていただいたサイト

jQuery :: チェックボックスをラジオボタンのように振舞わせる

 

方法

今回はプレーンなチェックボックスではなく、

装飾のための要素を追加したチェックボックスで、

この動きができる方法を考えました。

 

まず装飾したチェックボックスを用意します。

HTML

 

CSS

本体のチェックボックスを限りなく透明にして隠し、

代わりに背景画像で装飾したspanをチェックボックスに見立てる方法を使いました。

通常はここでjQuery等を使い、本体のチェックボックスと見立てたチェックボックスを連動させるのですが、

今回はラジオボタンのような動きにするため、

処理をラジオボタンの動きにするjQueryと連動するようにします。

 

JavaScript

 

チェックボックスを判定するときの判断が逆のように感じますが、

チェックボックスをクリックしたときにチェックがすでに動いているので、判定が逆になるのが注意ポイントです。

今回のデモでは、2つの列それぞれでラジオボタンのような動きをするようにしてみました。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ