Show and Hide Two DIVS Using JQuery

<div>
<input type="radio" name="radioOption" id="PaymentWithCreditCard" value="PaymentWithCreditCard" style="margin: 4px 16px 0;" />
<label for="PaymentWithCreditCard">Credit Card</label>
<br />
<input type="radio" name="radioOption" id="StoredPaymentMethods" value="StoredPaymentMethods" style="margin: 4px 16px 0;" />
<label for="StoredPaymentMethods">Stored Payment Methods</label>
</div>
<div id="div1" style="display:none;">
</div>
<div id="div2" style="display:none;">
<div class="box-frame" style="height: 100px !important;border: 1px solid black !important;">                        <input type="radio" name="radioOption" id="cardradio" value="option2" style="margin: 4px 16px 0;" />                            <label for="cardradio" style="padding:7px">                             <span><label id="CardNo">Card Number:**********4141</label></span>                              <span><label id="CardExpiryDate">01/04/2024</label></span>                          </label>
</div>
</div>

$(document).ready(function () {
            $("input[name='radioOption']").change(function () {
var selectedValue = $(this).val();
if (selectedValue === "PaymentWithCreditCard" && selectedValue != "StoredPaymentMethods") {
$("#div1").show();
$("#div2").hide();
} else if (selectedValue === "StoredPaymentMethods" || selectedValue != "PaymentWithCreditCard") {
$("#div1").hide();
$("#div2").show();
}
});
});