Internet Explorer 8 get value of Radiobutton

Question

I've been googling for about 2 hours to fix the following problem (other Stackoverflow Questions included):

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('input[type="radio"]').unbind('click.preset')
        .bind('click.preset', function() {
            doingStuffWith(jQuery(this).val());
        });
    });
</script>

<input type="radio" name="lightType" value="led" />
<input type="radio" name="lightType" value="tube" />

As you can see, I'm just trying to retrieve the current value of the radio button group "lightType" to work with it. This is working like a charm in Firefox / Safari / Chrome, but IE8 is giving me a hard time by just returning an empty string.

I've already tried several hacks from other questions like binding the change event to the radio buttons und forcing IE8 to fire it by blurring the clicked radio button etc. Maybe I'm just suffering from blindness right now.

I'm working with the latest jQuery version and I've made sure that no other binded events interfere. Interestingly though, adding an alert() before retrieving the value and IE returns the current value:

....
// DOES WORK
alert();
alert(jQuery(this).val()); // alerts e.g. "tube"

// DOESN'T WORK
alert(jQuery(this).val()); // alerts ""

I thought it could be a timing problem, but trying to delay my single alert call with setTimeout didn't help.

Thanks in advance guys, I hope I'm just blind and didn't find another ugly behaviour in IE8.

Help me learn why not just: `jQuery('input[type="radio"]').on('change',function(){ doingStuffWith(jQuery(this).val()); });` — Mark Schultheiss, Mar 20 '13 at 23:27
The change listener in IE fires **when the control loses focus**, which is per the W3C spec but not intuitive and not how other browsers have implemented it (they use it effectively as a click listener for checkboxes and radio buttons). Hence a click listener is usually used on those elements. — RobG, Mar 21 '13 at 00:05

score 0 · Answer 1 · edited May 23 '17 at 12:02

0

I would use the latest jQuery and on() and the :checked selector in the callback:

jQuery(document).ready(function() {
    jQuery('input[type="radio"]').on(function('change blur mousedown click') {
         alert(jQuery('input[type="radio"]:checked').val());
    });
});

Actually this is a little bit tricky, you can not fetch the selected radio button with "this" in the callback you have to use an other selector: How can I know which radio button is selected via jQuery?

edited May 23 '17 at 12:02

Community

1
1

answered Mar 21 '13 at 00:26

powtac

40,542
28
115
170

I might be wrong, but I believe if you include change and click in the `on` it will fire twice on some browsers. – Mark Schultheiss Mar 21 '13 at 12:20

score 0 · Accepted Answer · answered Mar 28 '13 at 10:10

Thank you for your answers, but none worked. I'm not sure if this is a bug in jQuery or is just a problem I've hit in my particular case. It seems like jQuery is forcing IE8 to fire the change event before the field really changes.

I've finally solved it by binding to the blur event and combining it with powtacs :checked solution like this:

<script type="text/javascript">
jQuery(document).ready(function() {

   jQuery('input[type="radio"]').unbind('click.preset')
   .bind('click.preset', function() {
       jQuery(this).blur();
   }

   jQuery('input[type="radio"]').unbind('blur.preset')
   .bind('blur.preset', function() {
        doingStuffWith(jQuery('input[type="radio"]:checked').val());
    });
});
</script>

score 0 · Answer 3 · answered Apr 13 '17 at 18:43

A fair option for IE8 is creating a class (!) in each radio option and use it to selected the checked option. Semantically it is a little weird, but it worked perfectly to me:

HTML

<input type="radio" name="example" class="example_class" value="1"/>#1
<input type="radio" name="example" class="example_class" value="2"/>#2
<input type="radio" name="example" class="example_class" value="3"/>#3

JS

var exampleValue = $('.example_class:checked').val();

Internet Explorer 8 get value of Radiobutton

3 Answers3