以两种方式更新选中的单选按钮答案

【问题标题】：Updating checked radio button in two ways以两种方式更新选中的单选按钮
【发布时间】：2020-11-28 08:07:55
【问题描述】：

就像你在图片中看到的一样，默认部分是我在表单中的默认视图。附加的视图将根据 ajax 请求显示。

我正在尝试使单选按钮能够在选择默认视图或附加视图时相互反映。例如，当我从 Default 中选择 Yes 时，附加视图 也会自动更新为 Yes。然后从 Appended View 选择 No，它也会将 Default 反映到 No。

请在此链接上查看我的代码并进行测试 https://codepen.io/terrer-sandman/pen/WNwbPMv?editors=1010

【问题讨论】：

标签： html jquery radio

【解决方案1】：

试试这个：

function autoSelect(id, value) {
  $('input[type=radio][data-id='+id+'][value='+value+']').click();
}

$('.can_claim_default').on('change', function(){
        autoSelect($(this).data('id'), $(this).val());
    })

$('#receipt-inline-view').on('change', 'input[name="can_claim"]', function(){
        autoSelect($(this).data('id'), $(this).val());
    })

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div style="padding: 15px;">

<!-- You can remove the "50002" from names and classes if you want -->

<p>Default</p>
<div>
  <label class="radio-inline">
    <input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" checked="" value="0">No Status
  </label>
  <label class="radio-inline">
    <input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" value="1">Yes
  </label>
  <label class="radio-inline">
    <input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" value="2">No
  </label>
</div>

<br /><br />

<p>Appended View</p>
<div id="receipt-inline-view">
  <label class="radio-inline">
    <input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" checked="" value="0">No Status
  </label>
  <label class="radio-inline">
    <input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" value="1">Yes
  </label>
  <label class="radio-inline">
    <input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" value="2">No
  </label>
</div>
  
</div>

【讨论】：

工作得很好！非常感谢！