>  >  >  > 

jQueryでラジオボタンとチェックボックスを使いやすくしてみた

jQueryでラジオボタンとチェックボックスを使いやすくしてみた

こんにちは、ウラカワです。

先日友人の結婚式に行ってきたのですが、スピーチがユーモア溢れてたのが凄く印象的でした。

あと、一人で来られている方が居て、料理1品目に手を付ける前に「実はこれから仕事なんだよねー」と帰られて衝撃を受けました。本当にお疲れ様です・・・。

呼んだ友人が愛されてるのか鬼畜なのか・・・

さて、それでは本題。

フォームでよく使うラジオボタンとチェックボックス。

そのままでも別に問題は無いのですが、ちょっと手を加えるだけで使いやすくなりますよね。

最近絞り込み検索で実装することがあったので、備忘録としてまとめました。

目次

  1. 押しやすく、分かりやすくする
  2. ラジオボタンも選択解除出来るようにする
  3. 一括で選択解除するボタンを追加する
  4. まとめ

押しやすく、分かりやすくする

ここは重要ですね。まずは定番の<label>を使います。

これにスタイルを付ければとりあえず見た目は押しやすくなりますね。

次は選択・未選択の状態を分かりやすくしたいと思いますが、このままだと<label>に変化がないのでjQueryでclassを付けたいと思います。

プロパティの値を取得するのに.prop()が便利です。

これを利用して、ページがロードされた時と、変化があった時に状態を判定し、チェック状態の時に<label>

あとはスタイルを付けて完成!

背景画像とかアイコンフォントとか使ってinputの部分も含めて丸々変えてしまうのも良いかと思います。

ラジオボタンも選択解除出来るようにする

普通に空の選択肢を用意しても良いのですが、項目と選択肢が増えてくると微妙・・・だけど一覧性も欲しいからラジオボタンが良いな、ということで今回の方法にしました。

何をしてるかというと、以下のような流れです。

  1. それぞれの選択状態を取得して配列にする
  2. クリックしたときに配列を参照
  3. 値がtrueの場合解除

ここでも.prop()を使いますが、今回は値を取得するだけではなく設定もしています。

設定する場合は上記のように使います。

一括で選択解除するボタンを追加する

他に2つに比べたら凄く単純ですね。
classと属性を外してやるだけです!

まとめ

3つをまとめました。

基本的に合体させただけですが、解除ボタンを押した時も選択状態の配列を更新するようにしてます。

今回はちょっとした部品ぐらいしかやってませんが、お問い合わせフォームだとバリデーションとかも重要ですよね。

あと定番なのはカートの周りでしょうか。

フォームによって求められるものがかなり変わってくるので、いつかそのあたりもまとめられたら良いな、と思います。

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング