参照
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>