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

按钮用于替换无线电输入的交互。在每个按钮的第一次初始点击时，它按预期工作，但任何后续点击返回undefined（并完全从输入中删除已检查状态）。

使调试特别棘手的是，当我检查DOM时，一切都按预期发生。无线电检查状态/ attr 更改，但jquery仍然将其报告为未定义，并且在视觉上未选中单选按钮（如果您在jsfiddle上检查结果并在您看到输入时可以看到这一点点击按钮）。

有什么想法吗？

Answer 1

您可以改为使用prop：

＆＃13;

$(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);
  })

});

＆＃13;

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

＆＃13;

Answer 2

使用prop()代替attr()和removeAttr()来更改checked按钮的radio状态。

查看.prop('checked',false) or .removeAttr('checked')?了解详情。

Demo

＆＃13;

$(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);
  });

});

＆＃13;

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

＆＃13;

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

2 个答案: