プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

チェックボックス、ラジオボタンの影響

  • 2018年10月13日
  • 2018年10月13日
  • html/css
  • 23view
  • 0件

チェックボックス、ラジオボタンが嫌いです。なぜなら苦手だから。

チェックボックス、ラジオボタンの影響

冒頭に書いた理由により使いたくないのが本音だが、案件等では登場頻度が高いのが現実で、普通のフォームと比べて以下のような影響がでてくると思う。

データ登録時

フォームで入力した値をDBに格納する場合
ラジオボタンは一つしか選択できないフォームのため、やりやすい。
男、女から選択するラジオボタンがあるとして、登録データとしてそのままの値ではなく、男なら0、女なら1といったデータでinsertしたい場合などは、labelに男、valueに0。同じようにlabelに女、valueに1といった感じにしておけば、postするときの値はvalueの値になるので楽チン。

チェックボックスの場合は、複数入ることが想定される。この時点でもうちょっと嫌い。
チェックボックスで選択した分だけの値をDBの一つのカラムにカンマ区切りで入れるという方法を取れば、取り出すときも配列として取り出せてやりやすいかもしれない。
しかしそれをやってしまうとデータを検索するときに、一つのカラムに入っている複数の値を対象にしなければいけないので、like句が必須になり、並び替えなどはさらに面倒くさい。

となるとやはり配列のデータでリクエストを送り、サーバー側でチェックボックスの値をfor文で別テーブルに保存するのがキレイな形のように思える。

データ検索時

ラジオボタンの場合は検索時も登録時と同様にlabel,valueで分けることで実装しやすい。
チェックボックスの場合は二次元配列の形でサーバー側に渡し、配列の個数分のvalueをsqlのwhere句に追加する形になる。でいいのかな。。

データバインド時

例えば既にあるデータの編集画面を開くときや、バリデーションエラーでセッションにあるデータをフォームに再入力させる場合など。

取得するデータは0,1..等の形だとして、表示の値は文字列だとする。
いままでとと同様にラジオボタンにlabel,valueとしても、レスポンスは正しいのにチェックが入らない。ラジオボタンのlabelを0,1..とするとうまくチェックが入った状態になるが、これではなんのチェックか意味がわからない。

悩んだ挙句、SQLでセレクトする時点でCASE句を使うことにするとうまくいった。
例としては以下のような感じ。

SELECT ***
, ****
, CASE
WHEN *** = '0' THEN '男'
WHEN *** = '1' THEN '女'
ELSE '';
END AS ***,
FROM ****;

こうすることで取得結果の時点で文字列の形でデータをとってこれるので、そのままの値でボックスにチェックの有無を付けることができる。

今時のフロント界隈に強くなりたくてvue.jsとか使っているけど、こういう基本的なところからしっかり理解しないといけないな。。