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

Question

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

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

请检查此 link 我的代码并进行测试 https://codepen.io/terrer-sandman/pen/WNwbPMv?editors=1010

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

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

Updating checked radio button in two ways

html

jquery

radio