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