jQuery show div on radio select with auto check radio option -
i'm using jquery show/hide div on radio select. works fine, wan't extend it, specific radio selected default on page load.
here's html
<input type="radio" id="payment1">payment1 <input type="radio" id="payment2">payment2 <div id="paymentcontainer1" style="display:none;">payment 1 container</div> <div id="paymentcontainer2" style="display:none;">payment 2 container</div>
jquery
$(document).change(function () { if ($('#payment1').prop('checked')) { $('#paymentcontainer1').show(); } else { $('#paymentcontainer1').hide(); } if ($('#payment2').prop('checked')) { $('#paymentcontainer2').show(); } else { $('#paymentcontainer2').hide(); } });
here's fiddle http://jsfiddle.net/teva/yaucs/1/
i tried adding
$("#payment1").prop("checked", true);
but doesn't work.
thanks
edit way make fields in specific div not hide, disabled? i'm using 1 form divs , when hide them jquery, form doesn't post, because fields empty. so, hide div , disable inputs. possible jquery? tnx
dude, why using .change event on document, may give errors when other change in page.
better use
$(document).ready(function () { $('input[type=radio]').change(function(){ if ($('#payment1').is(':checked')) { $('#paymentcontainer1').show(); } else { $('#paymentcontainer1').hide(); } if ($('#payment2').is(':checked')) { $('#paymentcontainer2').show(); } else { $('#paymentcontainer2').hide(); } }); }); $("#payment1").prop("checked", true).change();
you have other issue, in case both radio getting selected, ideally not way.
$(document).ready(function () { $('input[type=radio]').change(function(){ if ($('#payment1').is(':checked')) { $('.containner').hide(); $('#paymentcontainer1').show(); } else { $('#paymentcontainer1').hide(); } if ($('#payment2').is(':checked')) { $('.containner').hide(); $('#paymentcontainer2').show(); } else { $('#paymentcontainer2').hide(); } }); }); $("#payment1").prop("checked", true).change();
Comments
Post a Comment