スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[Web] jQuery を使ってフォームの必須項目表示を簡単に動的に切り替えをしよう

端的にいうと、jQuery で特定のクラスに対して一括でスタイルを変更する、ということです。



「お問い合わせ」「資料請求」のラジオボタンの選択を変更すると、
必須項目の表示である の場所が変わります。

実際に入力された後の処理はサーバサイドのスクリプトでチェックはしてやる必要が
あるのですが、事前に必須項目が分かれる場合には、

● ・・・ 共通の必須項目です
△ ・・・ お問い合わせの際の必須項目です
★ ・・・ 資料請求の際の必須項目です

などと記号をいっぱい使ってわけがわからない表示よりわかりよいかと思います。

動作としては、※ それぞれに、どの状態で必須かというパターンでそれぞれ
クラス分けを行っています。上記の例でいれば、

"both" ... 共通の必須項目
"toi" .... お問い合わせの必須項目
"siryou" ... 資料請求の必須項目

としてそれぞれにクラスを設定しておき、イベントはラジオボタンのクリック(選択)時に
駆動するようにします。あとは、ラジオボタンの選択内容によって分岐し、それぞれの
パターンのときの表示・非表示を visibility の属性を変更することによって実現します。
(少し冗長な書き方にしています・・・)

function dispFields(){
//選択値を取得
var kind = $("input[@type='radio']:checked").val();
//資料請求
if( kind == '資料請求' ){
$('.toi').css( 'visibility', 'hidden' );
$('.siryou').css( 'visibility', 'visible' );
$('.both').css( 'visibility', 'visible' );
}
//問合せ
else{
$('.toi').css( 'visibility', 'visible' );
$('.siryou').css( 'visibility', 'hidden' );
$('.both').css( 'visibility', 'visible' );
}
}

別に jQuery を使わなくても可能なことですが、個別にidを指定したり、
ループをさせて判断をさせたりしなくていいので、 jQuery を使った方がシンプルに書けますね。



↓リファレンス用に購入しました。1冊こういうのがあると使いよいです。

jQuery ポケットリファレンス (POCKET REFERENCE)jQuery ポケットリファレンス (POCKET REFERENCE)
(2010/06/18)
鶴田 展之

商品詳細を見る
関連記事
スポンサーサイト

テーマ : web制作
ジャンル : コンピュータ

comment

管理者にだけメッセージを送る

検索フォーム
リンク
最新記事
最新コメント
カテゴリ
RSSリンクの表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。