よくあるフォームなどで、チェックボックスにチェックを入れると追加で新しい入力欄が出てくるようなイメージ。
以下ソース
[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タグ等で使うともっと色々な用途で使える。