jqueryを使用してフォーム入力を表示

チェックボックスをオンにした後にフォーム入力を表示するjqueryコードを作成します。これが私がフォーム入力を形式化した方法です。これを行う最善の方法は何ですか？jqueryを使用してフォーム入力を表示

あなたが行うことができ

echo '<li class="checkbox_item">'. form_label('Number of bedrooms','bedrooms'). form_checkbox('bedrooms','yes'). form_error('bedrooms').'</li>'; 
    echo '<li class="input_item" id=no_rooms>'. form_label('Number of bedrooms','bedrooms'). form_input('bedrooms'). form_error('bedrooms').'</li>'; 

    echo '<li class="checkbox_item">'. form_label('Number of bathfooms','bathrooms'). form_checkbox('bathrooms'). form_error('bathrooms').'</li>'; 
    echo '<li class="input_item">'. form_label('Number of bathfooms','bathrooms'). form_input('bathrooms'). form_error('bathrooms').'</li>';

出典

2011-07-01 serengeti12

：

//hide all inputs 
$('.input_item').hide() 

//when a checkbox is ticked, hide/unihde next li 
$('.checkbox_item input').click(function(){ 
    $(this).closest('li').next('.input_item').toggle($(this).is(':checked')); 
});

作業フィドルhttp://jsfiddle.net/ttyx8/1/

EDIT（コードが良くなるように、私は次のセレクタを追加しました）

出典

2011-07-01 14:48:19

html（）関数このようにする利点は、実際に必要とされていない限り、フィールドがDOM内にないことです。いくつかのチェックボックスはかなりマイナーですが、多くのデータや要素を置き換えたり読み込んだりするのであれば有益かもしれません。また、このメソッドは、より動的なもの（他の入力に基づくチェックボックスの条件付きセット）を可能にします。 – picus

これはまさに私が必要としていたものです。ありがとう。私はjsfiddleサイトも知らなかった。私はそれが私をたくさん助けると思う。 – serengeti12

私はへの最善の方法を考えます"change（）"イベントと "toggle（）"関数を使用します。 "change（）"イベントをチェックボックスにバインドすることができます。これは、一度トリガーされると、ターゲット要素の表示を「トグル」します。

例では、チェックボックスを1つ選択すると、入力フィールドが表示されます。チェックを外すと、入力フィールドは非表示になります。ニコラの答えは、それは非常に簡単であり、ほとんどの目的に役立つであろうという点で、より精巧な方法は、get（）関数または積極的にそれらを構築し、経由を挿入を使用してDOMにフィールドを読み込むことであろう最高の答えです

<html> 
<head> 
<script type='text/javascript' 
     src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'> 
</script> 

<script type='text/javascript'> 
$(document).ready(function(){ 
    $('#selectroom').change(function(){ 
     $('#chooseroom').toggle(); 
    }); 
}); 

</script> 

</head> 
<body> 
<p> 
Select bedrooms <input type='checkbox' id='selectroom'/> 
</p> 
<p id='chooseroom' style='display:none;'> 
How many bedrooms? <input type='text' name='roomnumber'/> 
</p> 
</body> 

</html>

出典

2011-07-01 15:06:45

私はそれぞれのチェックボックスと入力のために別のIDを使用することを避けようとしている。すべてのチェックボックスと入力に役立つものが必要です – serengeti12

jqueryを使用してフォーム入力を表示

答えて

関連する問題