javascript - Radio button value undefined -

i have following radio buttons,

php code:

<form class="small-box-footer" style="text-align:left;padding:10px;"  method="post" name="namehere"> <?php  $query = "select * subject";  $result = mysql_query($query);  while ($row39 = mysql_fetch_array($result)) {     $referrer_id = $row39['subject_id'];     $referrer_name = $row39['subject_name'];       ?> <input type="radio" class="subject-selected" name="subject" value="<?=$referrer_id?>"> <?=$referrer_name?><?=$referrer_id?><br />                        <?php } ?>                           </form>  

html generated:

<input type="radio" class="subject-selected" name="subject" value="2"> gcse maths2<br />  <input type="radio" class="subject-selected" name="subject" value="3"> gcse english3<br />  <input type="radio" class="subject-selected" name="subject" value="4"> gcse science4<br />  <input type="radio" class="subject-selected" name="subject" value="5"> gcse art5<br />  <input type="radio" class="subject-selected" name="subject" value="6"> gcse sociology6<br />  <input type="radio" class="subject-selected" name="subject" value="8"> ocr nationals ict8<br />  <input type="radio" class="subject-selected" name="subject" value="9"> ocr nationals sports9<br />  <input type="radio" class="subject-selected" name="subject" value="10"> ocr nationals business studies10<br />  <input type="radio" class="subject-selected" name="subject" value="11"> entry science11<br />  <input type="radio" class="subject-selected" name="subject" value="12"> functional skills english12<br />  <input type="radio" class="subject-selected" name="subject" value="13"> functional skills maths13<br />  <input type="radio" class="subject-selected" name="subject" value="14"> esol14<br />  <input type="radio" class="subject-selected" name="subject" value="15"> preparation working life15<br />                                                           </form>    

below javascript

 $( ".centre-selection" ).each(function() {           if ($('input.subject-selected').is(':checked'))             alert($('input[name=subject]:selected').val());             //$( ).attr( 'href', '?module=<?=$_request['module']?>&subject='+ $( ).attr('data-subject')+ '&centre_selected_id='+ $( ).attr('data-centre')+ '&class_selected_year='+ $( ).attr('data-year')+ '&class_selected_all='+ $( ).attr('data-all-centre')+ '&startdate='+ $( ).attr('report_date_start')+ '&enddate='+ $( ).attr('data-attendance-check-end'));             $( ).attr( "href", '?module=module_progress_report&subject='+ $('input[name=subject]:selected').val()+ '&centre_selected_id='+ encodeuricomponent($( ).attr('data-centre')) + '&class_selected_year='+ encodeuricomponent($( ).attr('data-year')) + '&class_selected_all='+ encodeuricomponent($( ).attr('data-all-centre')) +'&startdate='+$('#report_date_start').val()+'&enddate=18/12/2016');  } ); 

problem:

$('input[name=subject]:selected').val() not pick value of radio button. shows result undefined. tried method 1 , 2 both result undefined. please help. thanks

update:

i updated javascript , looks like,

$( document ).ready(function() {    $('.subject-selected').change(function(){            // $("#centre-class-menu").toggle(); $("#alert").toggle(); $("#centre").toggle(); $(".range").toggle(); });  var value; $(".subject-selected").change(function() {//changed class correct class selector   if ($(this).is(':checked')) {//use $(this).is(':checked')     console.log($(this).val());     value = $(this).val();     console.log(value);   } });         $( ".centre-selection" ).each(function() {              //$( ).attr( 'href', '?module=<?=$_request['module']?>&subject='+ $( ).attr('data-subject')+ '&centre_selected_id='+ $( ).attr('data-centre')+ '&class_selected_year='+ $( ).attr('data-year')+ '&class_selected_all='+ $( ).attr('data-all-centre')+ '&startdate='+ $( ).attr('report_date_start')+ '&enddate='+ $( ).attr('data-attendance-check-end'));             $( ).attr( "href", '?module=module_progress_report&subject='+value+ '&centre_selected_id='+ encodeuricomponent($( ).attr('data-centre')) + '&class_selected_year='+ encodeuricomponent($( ).attr('data-year')) + '&class_selected_all='+ encodeuricomponent($( ).attr('data-all-centre')) +'&startdate='+$('#report_date_start').val()+'&enddate=18/12/2016');           } );   }); 

i see nothing displayed on console , value send undefined.

please try this

$( document ).ready(function() {  $(".subject-selected").change(function() {    if ($(this).is(':checked')) {  	alert($(this).val());    }  });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="radio" class="subject-selected" name="subject" value="2">gcse maths2  <br />    <input type="radio" class="subject-selected" name="subject" value="3">gcse english3  <br />    <input type="radio" class="subject-selected" name="subject" value="4">gcse science4  <br />    <input type="radio" class="subject-selected" name="subject" value="5">gcse art5  <br />    <input type="radio" class="subject-selected" name="subject" value="6">gcse sociology6  <br />    <input type="radio" class="subject-selected" name="subject" value="8">ocr nationals ict8  <br />    <input type="radio" class="subject-selected" name="subject" value="9">ocr nationals sports9  <br />    <input type="radio" class="subject-selected" name="subject" value="10">ocr nationals business studies10  <br />    <input type="radio" class="subject-selected" name="subject" value="11">entry science11  <br />    <input type="radio" class="subject-selected" name="subject" value="12">functional skills english12  <br />    <input type="radio" class="subject-selected" name="subject" value="13">functional skills maths13  <br />    <input type="radio" class="subject-selected" name="subject" value="14">esol14  <br />    <input type="radio" class="subject-selected" name="subject" value="15">preparation working life15  <br />