愛知県春日井市でシンプルでいい感じの高機能ホームページ制作・ホームページ作成  名古屋市北区・守山区・東区もすぐ!一宮 瀬戸 小牧なども  

モバイルメニュー

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クエリでチェックボックスを択一にするスクリプトを入れます。

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

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

html

コンタクトフォーム

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

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

それでは GOOD WEB LIFE!

愛知県春日井市ホームページ制作ディーマーキングデザイン 名古屋 一宮 瀬戸 小牧
愛知県春日井市ホームページ制作デザイナー

投稿者

Watanabe Kousuke わたなべ こうすけ

1980.11.26生まれ B型 既婚 愛娘家

東京デザイナー学院名古屋校 メディアデザイン学科 卒業 (現 名古屋デザイナー学院)
看板屋(看板・店内サイン制作)、デザイン会社(雑誌・WEB等制作)を経て2010年からD-Marking Designの代表 兼 デザイナーとして活動中


ブログTOPへ
ご訪問ありがとうございます。

直メールはこちら
メールする

お電話はこちらまでお気軽に
電話する


PAGE TOP