日: 2016年9月26日

参照
http://ryus.co.jp/blog/jquerycheckboxonly1/
チェックボックスを択一にするjQuery

http://ngns4.net/staff/contact-form7-%E3%81%A7%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B%E3%81%A8%E5%85%A5%E5%8A%9B%E6%AC%84%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B/
Contactform7 でチェックを入れると入力欄が表示されるようにする

http://oshiete.goo.ne.jp/qa/8908597.html
jQueryのhide,showで中の要素がスライドしてしまう

これではすらいどしてまう

<script type="text/javascript">
jQuery(document).ready(function($){
$(".show1").css("display", "none");
$(".show2").css("display", "none");
$("#show_info1").click(function(){
if($('#show_info1 [type="checkbox"]').is(':checked')) {$('.show1').show('fast');}else{$('.show1').hide('fast');}
});
$("#show_info2").click(function(){
if($('#show_info2 [type="checkbox"]').is(':checked')) {$('.show2').show('fast');}else{$('.show2').hide('fast');}
});
});
</script>

改造
アニメイト使う

<script type="text/javascript">
jQuery(document).ready(function($){
$(".show1").css("display", "none");
$(".show2").css("display", "none");
$("#show_info1").click(function(){
if($('#show_info1 [type="checkbox"]').is(':checked')) {$('.show1').animate({ height: 'show' }, "fast");}else{$('.show1').animate({ height: 'hide' },"fast");}
});
$("#show_info2").click(function(){
if($('#show_info2 [type="checkbox"]').is(':checked')) {$('.show2').animate({ height: 'show' }, "fast");}else{$('.show2').animate({ height: 'hide' },"fast");}
});
});
</script>

jクエリでチェックボックスを択一にするスクリプト

 <script type="text/javascript">
        jQuery(function($){
            $(function(){
              $('.colorGroup input').on('click', function() {
                if ($(this).prop('checked')){
                    // 一旦全てをクリアして再チェックする
                    $('.colorGroup input').prop('checked', false);
					//ここオリジナル　ディスプレイnoneも入れる
					$(".show1").css("display", "none");
					$(".show2").css("display", "none");
					//ここまで　チェックにて非表示領域と表示領域をかえるため
					//いっぱいあるならここに追加してく
                    $(this).prop('checked', true);
                }
              });
            });
        });
        </script>