get radio button value on change not working

Question

I use this code for get the value of radio button in jquery, my problem is when I click the option 1 it works fine but when I click on option 2 it not work. Please help!

<form>
Option 1<input type="radio" name="opt" id="radio" value="Option 1">
Option 2<input type="radio" name="opt" id="radio" value="Option 2">
</form>

$('#radio').change(function(){
var value = $( 'input[name=opt]:checked' ).val();
alert(value);
});

JSFiddle: http://jsfiddle.net/khizar067/h6ye7/

Answer 1

Please try with the below Demo.

$('input[name=opt]').change(function(){
var value = $( 'input[name=opt]:checked' ).val();
alert(value);
});

http://jsfiddle.net/h6ye7/2/

Answer 2

ID of elements must be unique, if there are multiple elements with same id then the id selector will return only the first element. so in your case the change event handler is added to only the first radio element

<form>
Option 1<input type="radio" name="opt" class="radio" value="Option 1">
Option 2<input type="radio" name="opt" class="radio" value="Option 2">
</form>

and

//or $('.radio') as the selector
var $radios = $('input[name=opt]').change(function () {
    var value = $radios.filter(':checked').val();
    alert(value);
});

Demo: Fiddle