Toggle checked status on input inconstant in jQuery function

Question

I fear I'm missing something painfully obvious, but this jquery function appears to be working inconsistently.

HTML:

<label id="income_this_tax_year">
  <div class="left">
    <p>Have you had Self-Employment, Sole Trade or CIS income during the 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 are to replace the interaction of the radio inputs. On the first initial clicks of each button it works as intended, but any consequent click returns undefined (and removes the checked status from the inputs entirely).

What makes this particularly tricky to debug is that when I inspect the DOM everything happens as expected. The radios checked status/attr does change, but jquery still reports it as undefined and visually the radio button isn't checked (you can see this if you inspect the result on jsfiddle and watch the inputs as you click the buttons).

Any thoughts?

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. — Pete, Jul 23 '15 at 14:06
Hi @Pete, sorry what's not clear? Desired behaviour: "The buttons are to replace the interaction of the radio inputs". And reproducible code is included in the jsfiddle. — Nathan Hornby, Jul 23 '15 at 14:07
@NathanHornby A link to a jsFiddle isn't sufficient. Please include the relevant code (e.g. jQuery, HTML) in the body of the question itself, so the question is still useful even when the jsFiddle link doesn't work. I'm actually surprised you managed to post the question at all, there used to be checks in place to prevent this (oh wait, you made the word DOM into an inline code block to get around it). — Anthony Grist, Jul 23 '15 at 14:12
Must admit I just hate getting code into SO - I'll copy it over now - not really any reason to vote for close though is it, tis a simple edit. — Nathan Hornby, Jul 23 '15 at 14:13
@AnthonyGrist "oh wait, you made the word DOM into an inline code block to get around it" 0.o Dude you need to get that paranoia in check! — Nathan Hornby, Jul 23 '15 at 14:15
@NathanHornby before you edited your question you only had a link to fiddle. The code must be included in the question itself, not just a link to an external site — Pete, Jul 23 '15 at 14:35

score 3 · Answer 1 · answered Jul 23 '15 at 14:05

You can use prop instead:

$(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]').removeAttr('checked');
    //replace here attr with prop
    $('#' + 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/2.1.1/jquery.min.js"></script>
<label id="income_this_tax_year">
  <div class="left">
    <p>Have you had Self-Employment, Sole Trade or CIS income during the 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>

score 2 · Accepted Answer · edited May 23 '17 at 12:22

Use prop() instead of attr() and removeAttr() to change the checked status of radio buttons.

Check .prop('checked',false) or .removeAttr('checked')? for 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 you had Self-Employment, Sole Trade or CIS income during the 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>

Cheers! Wasn't much to go on picking between you and @AlexChar - both quick off the mark! — Nathan Hornby, Jul 23 '15 at 14:20

Toggle checked status on input inconstant in jQuery function

2 Answers2