javascript - 无法使用 Javascript/Jquery 动态检查单选按钮

Question

我需要一个帮助。我需要使用 Javascript/Jquery 动态检查单选按钮。我在下面解释我的代码。

<div style="float:left; margin-right:10px;">
  <input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
  <input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
  <input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
</div>
<span>
  <button type="button" id="btn" name="btn" onclick="setRadioButtonValue()">Set</button>
</span>

这里有 3 个单选按钮可用。当用户单击设置按钮时，应根据给定值检查一个单选按钮。我的 javascript 代码如下。

function setRadioButtonValue(){
  var valu="5736daffed8cda709ffc8917";
   $('#answer_type0').val(valu).prop('checked', true);
   console.log('check',document.getElementById('answer_type0').checked);
}

我更新的代码在这里可用

updated plunkr

这里我需要根据给定值(i.e-var valu="5736daffed8cda709ffc8917")进行检查，以便根据代码检查是/否，但在我的情况是第一个单选按钮总是被选中。请帮助我解决这个问题。同样，我还需要检查每组中的多组单选按钮。我的plunkr代码在这里。

Answer 1

使用attribute 选择器并使用:radio 选择 radio 输入。

删除 duplicate-id 属性

function setRadioButtonValue(elem) {
  var value = "5736daffed8cda709ffc8917";
  $(elem).closest('div').find(':radio[value="' + value + '"]').prop('checked', true);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="float:left; margin-right:10px;">
  <input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
  <input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
  <input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
  <button type="button" name="btn" onclick="setRadioButtonValue(this)">Set</button>
</div>
<br>
<br>
<div style="float:left; margin-right:10px;">
  <input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
  <input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
  <input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
  <button type="button" name="btn" onclick="setRadioButtonValue(this)">Set</button>
</div>
<br>
<br>
<div style="float:left; margin-right:10px;">
  <input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
  <input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
  <input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
  <button type="button" name="btn" onclick="setRadioButtonValue(this)">Set</button>
</div>