0

I'm using jQuery to show/hide div on radio select. This works fine, but i wan't to extend it, so specific radio is selected by 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 it doesn't work.

thanks

Edit Any way to make fields in specific div to not just hide, but disabled? I'm using one form for all divs and when i hide them with jQuery, form doesn't post, because fields are empty. So, hide div and disable inputs. Is this possible with jQuery? Tnx

5 Answers 5

1

try following:

  $("input[type=radio]").change(function () {

   if ($('#Payment1').prop('checked')) {
      $('#PaymentContainer1').show();
  } else {
      $('#PaymentContainer1').hide();
   }

   if ($('#Payment2').prop('checked')) {
      $('#PaymentContainer2').show();
   } else {
      $('#PaymentContainer2').hide();
  }
});

$("#Payment2").prop("checked", true).trigger("change");

here is the link: http://jsfiddle.net/yauCs/5/

0

Dude, Why are you using .change event on document, it may give errors when you do some other change in the page.

better use like this

$(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 some other issue, in your case both radio getting selected, ideally this is not the 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

0
0

Avoid using $(document).change() as you will be listening to events for every element in the DOM, on() allows the elements to be dynamically added and still work.

$(document).on('change','input',function () {

    if ($('#Payment1').prop('checked')) {
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').prop('checked')) {
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
});

$("#Payment1").prop("checked", true);

Also set your radio's name to the same thing to ensure only one is selected

fiddle

0

Add name="payment" in both radio so they will act as group and call click after change handler

HTML

<input type="radio" name="payment" id="Payment1">Payment1
<input type="radio" name="payment" id="Payment2">Payment2
<div id="PaymentContainer1" style="display:none;">Payment 1 container</div>
<div id="PaymentContainer2" style="display:none;">Payment 2 container</div>

JS

$(document).change(function () {
    if ($('#Payment1').prop('checked')) {
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').prop('checked')) {
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
});
$("#Payment1").click();

jsFiddle

0

very little mistake in this code, try this i hope this will work prefectly $(document).ready(function(){ $("#Payment1").attr("checked", true);

if ($('#Payment1').prop('checked')) {
    $('#PaymentContainer1').show();
} else {
    $('#PaymentContainer1').hide();
}

if ($('#Payment2').prop('checked')) {
    $('#PaymentContainer2').show();
} else {
    $('#PaymentContainer2').hide();
}

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.