コンタクトフォーム7で択一チェックボックスをチェックして切り替えると、フォームの内容を一部切り替える | 愛知県春日井にあるホームページ制作 D-MA…

ホームページ制作ディーマキング

お気軽にお問い合わせください

初回お問い合わせのみメールフォームより
お問い合わせください

お問い合わせ

新規会員登録で200pt GET

ゲストさん　新規登録

ログイン

お気軽にご相談ください！
お問い合わせフォーム
0568-36-3104

2016.09.26 UP !

コンタクトフォーム7で択一チェックボックスをチェックして切り替えると、フォームの内容を一部切り替える

tnm

どうもD-Marking Design 渡辺です。

久々に専門的な事書きます。

今制作しているサイトで、お問合せ内容によって、フォームを少々切り替えたいという事になり、

色々探して、実装したので、ご紹介します。

チェックボックス択一選択　▶　非表示項目が切り替わる

参考url

http://ryus.co.jp/blog/jquerycheckboxonly1/
■チェックボックスを択一にするjQuery

http://ngns4.net/staff/contact-form7-でチェックを入れると入力欄が表示される/
■Contactform7 でチェックを入れると入力欄が表示されるようにする

http://oshiete.goo.ne.jp/qa/8908597.html
■jQueryのhide,showで中の要素がスライドしてしまう

まずはjクエリでチェックボックスを択一にするスクリプトを入れます。

 <script type="text/javascript">
        jQuery(function($){
            $(function(){
              $('.colorGroup input').on('click', function() {
                if ($(this).prop('checked')){
                    // 一旦全てをクリアして再チェックする
                    $('.colorGroup input').prop('checked', false);
					//ここオリジナル　ディスプレイnoneも入れる
					$(".show1").css("display", "none");
					$(".show2").css("display", "none");
					//ここまで　チェックにて非表示領域と表示領域をかえるため
					//いっぱいあるならここに追加してく
                    $(this).prop('checked', true);
                }
              });
            });
        });
        </script>

jQuery(function($){

$(function(){

$('.colorGroup input').on('click', function() {

if ($(this).prop('checked')){

// 一旦全てをクリアして再チェックする

$('.colorGroup input').prop('checked', false);

//ここオリジナル　ディスプレイnoneも入れる

$(".show1").css("display", "none");

$(".show2").css("display", "none");

//ここまで　チェックにて非表示領域と表示領域をかえるため

//いっぱいあるならここに追加してく

$(this).prop('checked', true);

}

});

</script>

そして今度はチェックボックスによって、ディスプレイnone を切り替えるスクリプト。ただし、参考サイトのデフォルトのshow でやると横からスライドイン　横へスライドアウトしてしまう、show,hideの仕様なようです。なのでかわりにanimateを使う。

<script type="text/javascript">
jQuery(document).ready(function($){
$(".show1").css("display", "none");
$(".show2").css("display", "none");
$("#show_info1").click(function(){
if($('#show_info1 [type="checkbox"]').is(':checked')) {$('.show1').animate({ height: 'show' }, "fast");}else{$('.show1').animate({ height: 'hide' },"fast");}
});
$("#show_info2").click(function(){
if($('#show_info2 [type="checkbox"]').is(':checked')) {$('.show2').animate({ height: 'show' }, "fast");}else{$('.show2').animate({ height: 'hide' },"fast");}
});
});
</script>

jQuery(document).ready(function($){

$(".show1").css("display", "none");

$(".show2").css("display", "none");

$("#show_info1").click(function(){

if($('#show_info1 [type="checkbox"]').is(':checked')) {$('.show1').animate({ height: 'show' }, "fast");}else{$('.show1').animate({ height: 'hide' },"fast");}

});

$("#show_info2").click(function(){

if($('#show_info2 [type="checkbox"]').is(':checked')) {$('.show2').animate({ height: 'show' }, "fast");}else{$('.show2').animate({ height: 'hide' },"fast");}

});

</script>

css ラベルけしてチェックボックスのみ

.colorGroup .wpcf7-list-item-label{ display:none}

1	.colorGroup .wpcf7-list-item-label{ display:none}

html

<div class="show1">
内容
</div>
<div class="show2">
内容
</div>

内容

</div>

内容

</div>

コンタクトフォーム

[checkbox checkbox-001 class:colorGroup id:show_info1 "ラベル１"]
[checkbox checkbox-002 class:colorGroup  id:show_info2  "ラベル2"]

1 2	[checkbox checkbox-001 class:colorGroup id:show_info1 "ラベル１"] [checkbox checkbox-002 class:colorGroup id:show_info2 "ラベル2"]

以上で、チェックボックスをクリックすると、divの非表示領域が表示されます。また他のチェックボックスにチェックを変えると、連動して、表示領域が切り替わると思います。あとは応用で、どのようにでもなるかと思います。

サクッとまとめてますが、このフォームページ作成でなかなか一日がかりです。

それでは GOOD WEB LIFE!

コンタクトフォームチェックボックス単一チェックボックス択一表示領域切り替え

編集者

Watanabe Kousuke

1980.11.26生まれ　B型　既婚　愛娘家

メディアデザインの専門学校を卒業後、2000年代はもっぱら音楽活動（HIPHOP）に明け暮れながら、看板屋（看板・店内サイン制作）、デザイン会社（WEB等制作担当）などに勤めながら、個人的なグラフィックデザイン・ホームページ制作の依頼もこなす。2010年代はホームページ制作で起業し、ひたすらホームページを作成し、結婚・子育てなどを経験。2020年代は実りの年にしたく、野望を湧かすw

instagram

ブログTOP