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(); 

fiddle demo

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(); 

perfect radio demo


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -