javascript - Toggle checked status on input inconstant in jQuery function -

i fear i'm missing painfully obvious, jquery function appears working inconsistently.

html:

<label id="income_this_tax_year">   <div class="left">     <p>have had self-employment, sole trade or cis income during tax year?</p>   </div>   <div class="right">     <input type="radio" name="income_this_tax_year" value="yes" />     <input type="radio" name="income_this_tax_year" value="no" />     <button type="button" data-value="yes" class="button">yes</button>     <button type="button" data-value="no" class="button">no</button>   </div>   <div class="float-clear"></div> </label> 

jquery:

$(document).ready(function(){    $('button').on('click', function(e) {     e.preventdefault();     var option = $(this).parent('.right').parent('label').attr('id');     var value = $(this).data('value');      $('#'+option).find('input[type=radio]').prop('checked', false);      $('#'+option+' input[value='+value+']').prop('checked', true);      var income_this_tax_year = $('input[name=income_this_tax_year]:checked').val();      console.log(income_this_tax_year);   })  }); 

jsfiddle

the buttons replace interaction of radio inputs. on first initial clicks of each button works intended, consequent click returns undefined (and removes checked status inputs entirely).

what makes particularly tricky debug when inspect dom happens expected. radios checked status/attr does change, jquery still reports undefined , visually radio button isn't checked (you can see if inspect result on jsfiddle , watch inputs click buttons).

any thoughts?

use prop() instead of attr() , removeattr() change checked status of radio buttons.

check .prop('checked',false) or .removeattr('checked')? more info.

demo

$(document).ready(function() {      $('button').on('click', function(e) {      e.preventdefault();      var option = $(this).parent('.right').parent('label').attr('id');      var value = $(this).data('value');        $('#' + option + ' input[value=' + value + ']').prop('checked', true);        var income_this_tax_year = $('input[name=income_this_tax_year]:checked').val();        console.log(income_this_tax_year);    });    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>  <label id="income_this_tax_year">    <div class="left">      <p>have had self-employment, sole trade or cis income during tax year?</p>    </div>    <div class="right">      <input type="radio" name="income_this_tax_year" value="yes" />      <input type="radio" name="income_this_tax_year" value="no" />      <button type="button" data-value="yes" class="button">yes</button>      <button type="button" data-value="no" class="button">no</button>    </div>    <div class="float-clear"></div>  </label>