色々未検証です。
たとえばフォームとかで、
「男性 or 女性」のラジオボタン選んで、それに応じてその後の項目を出し分けるなど。
普通に書くと下記のようになりますかね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<label><input type="radio" name="sex" value="男性"> 男性</label> <label><input type="radio" name="sex" value="女性"> 女性</label> <div id="man_wrap" style="display:none;"> ■彼女は、いますか？<br /> <input type="text" name="man_answer" /> </div> <div id="woman_wrap" style="display:none;"> ■彼氏は、いますか？<br /> <input type="text" name="woman_answer" /> </div> <script> $(function(){ $('[name="sex"]').change(function(){ var value = $(this).val(); if( value == '男性' ){ $('#man_wrap').show(); $('#woman_wrap').hide(); } else if( value == '女性' ){ $('#man_wrap').hide(); $('#woman_wrap').show(); } else { $('#man_wrap').hide(); $('#woman_wrap').hide(); } }); }) </script> |
ここで使えるのが、
.toggle( Boolean )
です。
通常はこのtoggleさんは、
表示されてれば、隠す。隠されてれば表示する。
のですが、
.toggle( true ) で、表示する。
.toggle( false ) で、隠す。
になります。
それを元にさっきのJavascriptを書くと。
|
1 2 3 4 5 6 7 8 9 |
<script> $(function(){ $('[name="sex"]').change(function(){ var value = $(this).val(); $('#man_wrap').toggle( (value == '男性') ); $('#woman_wrap').toggle( (value == '女性') ); }); }) </script> |
これでいけます。
そもそもif文自体が、trueかfalseかなので、それをまんまtoggleの中に入れちゃった系です。
ただこれは、いけるんじゃないかと思ってやったら動いただけなので、正しい使い方かどうかは、知りません。