【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; （非表示）にしておき、

#fruits1,#fruits2{
display:none
}

#fruits1,#fruits2{

display:none

}

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

document.getElementById('fruits1').style.display = "none";
document.getElementById('fruits2').style.display = "block";

1 2	document.getElementById('fruits1').style.display = "none"; document.getElementById('fruits2').style.display = "block";

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

$('#fruits3').css('display','block');
$('#fruits4').css('display','none');

1 2	$('#fruits3').css('display','block'); $('#fruits4').css('display','none');

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

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

$('#fruits3').fadeIn();
$('#fruits4').fadeOut();

1 2	$('#fruits3').fadeIn(); $('#fruits4').fadeOut();

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

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

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

//間違っているコード
$('[name="fruits2"]:radio').change( function() { //……中略…… });
//正しいコード
$(function() {
$('[name="fruits2"]:radio').change( function() {
//……中略……
});
});

//間違っているコード

$('[name="fruits2"]:radio').change( function() { //……中略…… });

//正しいコード

$(function() {

$('[name="fruits2"]:radio').change( function() {

//……中略……

});

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

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

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

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

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

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

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

するとつまり……

//間違っているコード
$('[name="fruits2"]:radio').change( function() { //……中略…… });
//正しいコード
jQuery( function( $ ) {
//カプセル化
$(function() {
//readyイベント
$('[name="fruits2"]:radio').change( function() {
//……中略……
});
//↑readyイベントここまで
});
//↑カプセル化ここまで
} );