88

I have some radios in my page,and I want to do something when the checked radio changes,however the code does not work in IE:

$('input:radio').change(...);

And after googling,people suggest use the click instead. But it does not work.

This is the example code:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $('document').ready(
                function(){
                    $('input:radio').click(
                        function(){
                            alert('changed');   
                        }
                    );  
                }
            );

        </script>
    </head>
    <body>
        <input type="radio" name="testGroup" id="test1" />test1<br/>
        <input type="radio" name="testGroup" id="test2" />test2<br/>
        <input type="radio" name="testGroup" id="test3" />test3</br>
    </body>
</html>

It also does not work in IE.

So I want to know what is going on?

Also I am afraid if it will retrigger the change event if I click a checked radio?

UPDATE:

I can not add comment,so I reply here.

I use IE8 and the link Furqan give me also does not work in IE8. I do not know why...

Marcus Müller
  • 34,677
  • 4
  • 53
  • 94
hguser
  • 35,079
  • 54
  • 159
  • 293
  • 1
    Which version of IE are you using for the test? Your code works for me in IE8. You are right that the event will trigger if you click a checked radio. You need to perform a check in your code in order to avoid this. – kgiannakakis Mar 02 '11 at 10:05
  • it works for me , check the following http://jsfiddle.net/NerXh/ – Furqan Hameedi Mar 02 '11 at 10:06

5 Answers5

112

This code worked for me:

$(function(){

    $('input:radio').change(function(){
        alert('changed');   
    });          

});

http://jsfiddle.net/3q29L/

Parag Jadhav
  • 1,853
  • 2
  • 24
  • 41
alexl
  • 6,841
  • 3
  • 24
  • 29
  • 4
    This doesn't work for me when a single radio is targeted and selecting another radio causes the other to deselect. – Doug Amos Jul 12 '13 at 08:03
  • 1
    Except when performance is an issue on a page with many elements. In which case use `$('input[type=radio]')` instead (see "additional notes": http://api.jquery.com/radio-selector/) – jemmons Dec 24 '13 at 14:31
72

You can specify the name attribute as below:

$( 'input[name="testGroup"]:radio' ).change(
Iwao Nishida
  • 866
  • 6
  • 6
16

Works for me too, here is a better solution::

fiddle demo

<form id="myForm">
  <input type="radio" name="radioName" value="1" />one<br />
  <input type="radio" name="radioName" value="2" />two 
</form>

<script>
$('#myForm input[type=radio]').change(function() {       
    alert(this.value);
});
</script>

You must make sure that you initialized jquery above all other imports and javascript functions. Because $ is a jquery function. Even

$(function(){
 <code>
});

will not check jquery initialised or not. It will ensure that <code> will run only after all the javascripts are initialized.

Community
  • 1
  • 1
suhailvs
  • 20,182
  • 14
  • 100
  • 98
7

Try

$(document).ready(

instead of

$('document').ready(

or you can use a shorthand form

$(function(){
});
rahul
  • 184,426
  • 49
  • 232
  • 263
1

$( 'input[name="testGroup"]:radio' ).on('change', function(e) {
     console.log(e.type);
     return false;
});

This syntax is a little more flexible to handle events. Not only can you observe "changes", but also other types of events can be controlled here too by using one single event handler. You can do this by passing the list of events as arguments to the first parameter. See jQuery On

Secondly, .change() is a shortcut for .on( "change", handler ). See here. I prefer using .on() rather than .change because I have more control over the events.

Lastly, I'm simply showing an alternative syntax to attach the event to the element.

Community
  • 1
  • 1
Carlos Augusto
  • 31
  • 3