チェックボックスでテーブルの表示・非表示を切り替える

よくあるフォームなどで、チェックボックスにチェックを入れると追加で新しい入力欄が出てくるようなイメージ。

サンプルはこちら

以下ソース

jQuery

[javascript] <script> $(function(){ // 初期表示でチェックボックスが空だったら非表示エリアを隠す if ($('#check_flag').val() != '1') { $('.hidden_area').hide(); } }); //表示・非表示 var speed = 200; //表示スピード（ミリ秒）

function hiddenToggle() { ($('.hidden_area')).toggle(speed); } </script> [/javascript]

html

[html] <table class="table"> <tr> <td>チェックボックス</td> <td> <input id="check_flag" type="checkbox" name="check_flag" onclick="hiddenToggle();" value="0" /> </td> </tr>

<tr class="hidden_area"> <td>隠しエリア</td> <td> <input type="text" id="hidden_text" name="hidden_text" value="隠しエリア" /> </td> </tr> </table> [/html]

divタグ等で使うともっと色々な用途で使える。