JavaScriptこんにちは、ウラカワです。先日友人の結婚式に行ってきたのですが、スピーチがユーモア溢れてたのが凄く印象的でした。あと、一人で来られている方が居て、料理1品目に手を付ける前に「実はこれから仕事なんだよねー」と帰られて衝撃を受けました。本当にお疲れ様です・・・。呼んだ友人が愛されてるのか鬼畜なのか・・・さて、それでは本題。フォームでよく使うラジオボタンとチェックボックス。そのままでも別に問題は無いのですが、ちょっと手を加えるだけで使いやすくなりますよね。最近絞り込み検索で実装することがあったので、備忘録としてまとめました。押しやすく、分かりやすくするラジオボタンも選択解除出来るようにする一括で選択解除するボタンを追加するまとめ押しやすく、分かりやすくするここは重要ですね。定番の<label>を使います。value="ほげほげ">ほげほげ</label>これにスタイルを付ければとりあえず見た目は押しやすくなりますね。underline;}次は選択・未選択の状態を分かりやすくしたいと思いますが、このままだと<label>に変化がないのでjQueryでclassを付けたいと思います。{$(this).parent().removeClass('checked');}});}});プロパティの値を取得するのに.prop()が便利です。classを付与します。#ff0000;}あとはスタイルを付けて完成!背景画像とかアイコンフォントとか使ってinputの部分も含めて丸々変えてしまうのも良いかと思います。ラジオボタンも選択解除出来るようにする普通に空の選択肢を用意しても良いのですが、項目と選択肢が増えてくると微妙・・・だけど一覧性も欲しいからラジオボタンが良いな、ということで今回の方法にしました。{checked.push(false);}});}});何をしてるかというと、以下のような流れです。値がtrueの場合解除ここでも.prop()を使いますが、今回は値を取得するだけではなく設定もしています。値)設定する場合は上記のように使います。false);radio.parent().removeClass('checked');checkbox.parent().removeClass('checked');});});他に2つに比べたら凄く単純ですね。classと属性を外してやるだけです!まとめ3つをまとめました。基本的に合体させただけですが、解除ボタンを押した時も選択状態の配列を更新するようにしてます。{$(this).parent().removeClass('checked');checked.push(false);}});}});今回はちょっとした部品ぐらいしかやってませんが、お問い合わせフォームだとバリデーションとかも重要ですよね。あと定番なのはカートの周りでしょうか。フォームによって求められるものがかなり変わってくるので、いつかそのあたりもまとめられたら良いな、と思います。Viewで360°コンテンツをサイトに埋め込むA-Frameを使ってWebVRを実装してみよう無料で使えるJavaScriptやCSSなどのCDNサービスまとめ美しすぎるカードゲームjQueryで作る神経衰弱gulp4に移行するためにタスクを書き換えてみたマグネッツとは?福岡でWEB制作や中小企業様の集客支援などを行っている会社です。