昨日から悩んでたコンタクトフォーム7のプラグイン利用時に
チェックボックスで選択した値によって他の要素の表示・非表示を切り替える方法が解決したので忘れないうちにその方法を書いておきます。
作りたいフォーム
このようにチェックボックスのクリックされた項目によって
特定の要素が表示されるようにしたいと思います。
このフォームをつくるためにコンタクトフォーム7に書いたhtmlはこちらです。
<table> <tbody> <tr> <th>お名前</th> <td></td> </tr> <tr> <th>電話番号</th> <td>[tel tel-num]</td> </tr> <tr> <th>チェックボックスの項目</th> <td>[checkbox checkbox01 id:show-checkbox01 "例01" "例02" "例03"]</td> </tr> <tr class="example01"> <th>メールアドレス</th> <td></td> </tr> <tr class="example01"> <th> 住所</th> <td></td> </tr> <tr class="example02"> <th>身長</th> <td></td> </tr> <tr class="example02"> <th>体重</th> <td></td> </tr> <tr class="example02"> <th> 好きな食べ物</th> <td></td> </tr> <tr> <th>お問い合わせ</th> <td>[textarea your-message]</td> </tr> </tbody></table> [submit class:more_btn "送信"]
表示非表示の切り替えがあるということは必然的にjsを使うことになるなーと思い、
jsがまだまだ苦手な私はコピーできるような参考サイトがないか探しました。
しかし出てくるのはどれも選択項目が2つのものばっかり。
仕方ないので、選択項目が2つのものをどうにか応用して選択項目を3つ以上にすることにしました。
jsを組んでみた その1
まず参考にしたのはこちらのサイト
Contact Form 7で、ラジオボタンの選択値によって内容を表示・非表示切り替えするjQuery
タイトルが私のやりたいことをそのまんま表してくれています。
唯一違うのはラジオボタンかチェックボックスかという部分のみ。
さて、このサイトを参考にjsを書いてみました
jQuery(function($) {
$('input[type=checkbox]').change(function() { //typeがcheckboxってなってるinputが変わったら実行するよ
$(".example01").hide(); //普段はクラス名がexample01の要素は非表示にしてね
if($("input:checkbox[name='checkbox01']:checked").val() == "例01"){ //checkboxのnameがcheckbox01となっているinputのvalue値が例01にチェックがついている場合
$('.example01').slideToggle('slow'); //クラス名がexample01をゆっくりスライドしながら表示させる
} else if($("input:checkbox[name='checkbox01']:checked").val() == " ") { //そうじゃない場合
$('.example01').hide(); //クラス名がexample01は非表示
}
}).trigger('change'); //イベント実行
$('input[type=checkbox]').change(function() {
$(".example02").hide();
if($("input:checkbox[name='checkbox01']:checked").val() == "例02"){
$('.example02').slideToggle('slow');
} else if($("input:checkbox[name='checkbox01']:checked").val() == " ") {
$('.example02').hide();
}
}).trigger('change');
$('input[type=checkbox]').change(function() {
$(".example03").after().hide();
if($("input:checkbox[name='checkbox01']:checked").val() == "例03"){
$('.example03').slideToggle('slow');
} else if($("input:checkbox[name='checkbox01']:checked").val() == " ") {
$('.example03').hide();
}
}).trigger('change');
});
すると非表示にしたい部分はきちんと非表示になったし、クリックすると紐付けた特定の要素が表示される！！！
これはきた！！！！と思っていたのもつかの間・・・
例01にチェックを入れた状態で例02にチェックを入れても表示されない・・・
例01のチェックを外すと例02は表示されるけどこれは求めていたものじゃない・・・
調べてみるとval()はセレクタに合致した最初の要素のみを取得するということらしく、
ラジオボタンみたく一つだけを選択するものにはこれは使えるけど、今回つくりたいのは複数の項目があるチェックボックスの場合には向いていないようです。
jsを組んでみた その２
出来たと思ったけど出来てなかった時の悲しみは大きかったですが、そうはいってもきちんと完成させなければいつまでたっても終わらない。
ということで他の参考サイトを探してみました。
CONTACTFORM7 でチェックを入れると入力欄が表示されるようにする
このサイトで挙げられている例は選ぶ項目が1つのチェックボックスが複数個あるものだったので、このサイトを最初に見たときは自分の作りたいものはできないだろうと思っていました。
というのもコンタクトフォーム7ではチェックボックス全体にIDやclassをつけることはできますが、それぞれの項目ごとにIDやclassをつけることが出来ないからです。
上の参考サイトではそれぞれのチェックボックス全体にIDが割り振られていたので、半分諦めていました。
半分諦めたところで、気づきました。
別にIDで指定しなくてもよくないかということに。
:nth-childでどの要素かを指定すればいいんじゃん！！！って気づき、書いたのがこちらのコード
jQuery(document).ready(function($){
$(".example01").css("display", "none"); //クラス名がexample01の要素は非表示
$(".example02").css("display", "none"); //クラス名がexample02の要素は非表示
$(".example03").css("display", "none"); //クラス名がexample03の要素は非表示
$("#show-checkbox01 span:first-child").click(function(){ //IDがshow-checkbox01の中にある最初のスパンがクリックされたときの動き
if($('input:checkbox[value="例01"]').is(':checked')) //value値が例01のチェックボックスにチェックがついたら {$('.example01').show('fast');}else{$('.example01').hide('fast');} //クラス名がexample01の要素を表示させるよ、そうじゃなければ非表示だよ。
});
$("#show-checkbox01 span:nth-child(2)").click(function(){
if($('input:checkbox[value="例02"]').is(':checked')) {$('.example02').show('fast');}else{$('.example02').hide('fast');}
});
$("#show-checkbox01 span:nth-child(3)").click(function(){
if($('input:checkbox[value="例03"]').is(':checked')) {$('.example03').show('fast');}else{$('.example03').hide('fast');}
});
});
これで無事にどれを複数チェックをつけても全てが表示されるようになりました。
もしかしたらスマートな方法ではないのかもしれませんが、とりあえず求めていた形になったのでOKです。
