2012-01-11 21 views
0

2つの(はい/いいえ)オプションを持つフォームを作成する必要があります。ユーザーがそのオプションの1つをクリックすると、その特定の選択に関するより詳細な折りたたみサブフォームを取得する必要があります。彼が他のオプションを選択した場合、関連する情報を持つ別の折りたたみサブフォームを取得する必要があります。私は、JavaScriptやJquery(折りたたみ効果を得るために)を使用しなければならないことを知っていますが、私は両方に新しいです。簡単なチュートリアルや初心者のための情報は大歓迎です。動的フォームの作成

PS:この要件について多くの質問がありましたが、実際には初心者であることを理解するのは難しいです。

おかげで、

答えて

3

基本的に、あなたは)div要素に二つの異なるサブフォームをラップしてから(jQueryの.SHOWを使用する必要があるとしていると右のラジオボタンそれらを表示し、非表示に.hide()関数をクリックします。 http://papermashup.com/simple-jquery-showhide-div/

EDIT:ここ

は、表示と非表示に有用なチュートリアルであるユーザーのためのより具体的な答え..

$(document).ready(function(){ 
    $("#check-box").click(function(){ 
    if($(this).is(':checked')) { 
     $('#div1').show(); 
    } else { 
     $('#div1').hide(); 
    } 
    }); 

})。

+0

感謝を!本当に助かりました – uday

+0

問題ありません!私はいつもあなたの質問に答えて、あなたがそれをしていると思っていると印を付けることに感謝しますが、いずれにせよ、私が助けることができてうれしいです! –

+0

Hey Jesse、ユーザーが他のラジオボタンを1つ選択するとdivを表示したかった。それがうまく動作しないのは、 '.click'サポートチェックやラジオボタンのメソッドですか?または 'if value =" 1 "、show()'のような他の素材があります...あなたのリンクは役に立ちましたが、チェックボックスやラジオボタンのメソッドを見つけることができませんでした。あなたはそれを手伝ってくれますか? – uday

3

フォーム全体をレンダリングし、それぞれが異なるIDを持つすべてのサブフォームを非表示にする必要があります。押されたボタン/選択に応じて、あなたはこのようなコードに対応するdiv$.show()を呼び出す:

$("#choice1_subform").click(function(){ 
    $("#div1").show(); 
}); 
+0

ありがとう、私はhide()関数の使用について心配するべきではありませんか? Jesse Pollakのように以下に説明されていますか? – uday

+0

はい。別の選択肢をクリックすると、それは前のサブフォームを '非表示(hide) 'し、他の選択肢を表示する必要があります。 – Karlisson

+0

$( "#element_4_1")行に$が定義されていないとFirebugでエラーが発生します(function(){'どこが間違っているのか教えてください) – uday

関連する問題