【js】ラジオボタンを押すと質問内容が変わるようにする

以前から、Wordpressのお問い合わせフォームはContact Form 7を使っていましたが、確認画面と完了画面の都合でMW WP Form をいじることになったついでに気になったことをメモ。

久しぶりのjQueryに頭が…ウッ…。

ラジオボタンを押すと質問内容が変わるようにする

いわゆる「ラジオボタンを押すとドロップダウンで表示」というもの。

世間には2つのラジオボタンで表示/非表示というソースは多く落ちていましたが、3つのものはあまりなかったので2種類作ってみました。

1つ目は、JavaScriptとラジオボタンの配列を利用したもの。

See the Pen ラジオボタンでドロップダウン1(onclick&配列) by mp-webmagic (@mp-webmagic) on CodePen.0

2つ目は、jQueryでラジオボタンのidを利用したもの。

See the Pen ラジオボタンでドロップダウン2(prop&id) by mp-webmagic (@mp-webmagic) on CodePen.0

両方とも表示/非表示はCSSのdisplayで切り替えていて同じです。

それぞれの良いところと悪いところを見ていきます。

例1)JavaScriptとラジオボタンの配列を利用した場合

See the Pen ラジオボタンでドロップダウン1(onclick&配列) by mp-webmagic (@mp-webmagic) on CodePen.0

メリット

  • jQueryを参照しなくて済む
  • $を使わないので、そのまま貼り付けてもWordpress上でエラーにならない
    ※WordpressでjQuery使うときは”$”を”jQuery”に書き直す必要がある

デメリット

  • それぞれのinputタグの中にonclickをいちいち追加しなければいけない。
  • document.getElementByIdが多くなり文字数が画面を圧迫する
  • 慣れていないと、配列を[0]からではなく[1]から書いてしまう可能性

仕組み

ラジオボタンのどれが選択されているか?ではなく「このボタンが押されたら(onclick)」が起点になるので、りんごを選択していてもりんごを押せば一応if文が走るはず…。

ボタンを押す→JavaScriptが動く→if文でどのボタンがselected状態かを判定→CSSを書き換え。

配列は0から始まるので123ではなく012になります。

例2)jQueryでラジオボタンのidを利用した場合

See the Pen ラジオボタンでドロップダウン2(prop&id) by mp-webmagic (@mp-webmagic) on CodePen.0

メリット

  • 見た目がすっきりしている。短い。
  • id名は自分でつけるので、配列と違って名前を間違えにくい

デメリット

  • WordPress上で動かすときは”$”を”jQuery”に書き直す必要がある…。
  • 別途jQueryを参照しなければいけない。

仕組み

ボタンを押したら…ではなく、「ラジオボタンの内容が変更されたら(change)」が起点になる。

なので、既にりんごを選択している状態でりんごを押しても動作しない。

選択内容が変わる→jQueryが動く→if文でどのボタンがselected状態かを判定→CSSを書き換え。

CSS(display)切り替えについて

今回は基本のCSSで display:none; (非表示)にしておき、

JavaScriptでは、document.getElementById(‘#ID名’).style.display=”block”; で表示にします。

jQueryでは、$(‘#ID名’).css(‘display’,’block’); で表示にします。

id名は#ですが、.でクラス名でもOKです。

jQueryの方なら、ちょっと書き換えるだけでfadeでも動きます。

おわりに(jQueryが動かない時は…)

疲れているときにjQuery書いて、おかしいなあ動かないなあと思うじゃないですか。

後で見返したら、「$(function(){} で囲んでなかった(=readyイベントがなかった)」。そりゃ動かないわ。。

html内の要素を操作する時にはreadyイベントの仕組みを利用しなければなりません。

jQuery入門講座 使い方-readyイベント
デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

readyじゃなくて無名関数($(function(){} )でできるから付けた気になっていた。

さらに、無名関数と似てるからカプセル化もしていなかった。

WordPressでjQueryを使いたいのに動かない時は、「jQuery(function($){ });」で前後を囲んでカプセル化してやれば簡単です。

これで囲むと、その中では「$」が使えますので、サンプルコードもそのままコピーすれば動きます。カプセル化した中には普通のjQueryの書き方でOKです。特に修正は必要ありません。

jQueryをWordPressで使う場合の読み込み方と使い方 | プライマリーテキスト
jQueryのプラグインなどを入れてみてサンプル通りのコードを貼り付けたのに動かない!って事がよくあります。jQueryをWordPressで使いたいのに動かない場合、大抵はjQuery構文の$が使えないのが原因です。

するとつまり……

になる…はず……。

JavaScript系も閉じてないよ警告だしてくれるエディタがほしいな…。.netをVisual Studioでやってた頃がちょっと懐かしい。

※続きの記事はこちら!!
【WordPress】「MW WP Form」のラジオボタンを工夫
先日がんばってラジオボタン作りましたがMW WP Form上で動かなかったので、今度はvalueを取得して分岐するタイプを作ってみました…!笑