javascript - 在 jQuery 函数中切换输入不稳定的检查状态

Question

我担心我遗漏了一些非常明显的东西，但是这个 jquery 函数似乎工作不一致。

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

按钮将取代 radio 输入的交互。在每个按钮的第一次初始点击中，它按预期工作，但任何后续点击返回未定义(并从输入中完全删除选中状态)。

调试起来特别棘手的是，当我检查 DOM 时，一切都按预期进行。 radio 检查的状态/属性确实发生了变化，但 jquery 仍然将其报告为未定义并且在视觉上未选中单选按钮(如果您检查 jsfiddle 上的结果并在您观察输入时可以看到这一点单击按钮)。

有什么想法吗？

Answer 1

您可以使用 prop相反:

$(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>