I have 3 radio button inputs in three separate divs:
<div class="box1">
<input type="radio" name="paymentOption" checked="checked" value="creditcard_on_file" />
<!-- related subfields for that chosen option -->
</div>
<div class="box2">
<input type="radio" name="paymentOption" value="newCard" />
<!-- related subfields for that chosen option -->
</div>
<div class="box3">
<input type="radio" name="paymentOption" value="check" />
<!-- related subfields for that chosen option -->
</div>
on page load, the first one is default selected. and in IE9, when another is clicked, the first one stays selected! whoa.
what can I do to make it behave properly?
There was a typo in some other html surrounding the given markup. I’ve learned that IE seems to handle the situations of invalid markup a bit differently that other browsers in that it either duplicates a section, or will hide a section. Since in this case neither of those issues occurred, the markup within incorrect html has misbehaved.