无法使用 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"）进行检查，以便根据代码检查Yes/No，但在我的情况下，始终检查第一个单选按钮。请帮我解决这个问题。类似地我还需要检查每组中的多组单选按钮。我的plunkr 代码在这里。

Answer 1

使用attribute 选择器并使用: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>

Answer 2

在您的情况下，当循环完成时，i 始终设置为 2。如果您想使用 for 循环执行此操作，请参阅此 answer，或者您可以尝试这种简单的方法，在 div 中添加一个类。

var valu = ['5736daffed8cda709ffc8917', '5736db13ed8cda709ffc8918', '5736db29ed8cda709ffc8919']

function setRadioButtonValue() {
    var i = 0;
    $('.qclass').each(function() {
        console.log($(this).find('input[value="' + valu[i] + '"]').is(':checked'));
        $(this).find('input[value="' + valu[i] + '"]').prop('checked', true);
        i++;
    })
}

在我的例子中为包含收音机的 div 添加一个类 qclass

var valu = ['5736daffed8cda709ffc8917', '5736db13ed8cda709ffc8918', '5736db29ed8cda709ffc8919']

function setRadioButtonValue() {
  var i = 0;
  $('.qclass').each(function() {
    
    $(this).find('input[value="' + valu[i] + '"]').prop('checked', true);
    console.log($(this).find('input[value="' + valu[i] + '"]').is(':checked'));
    i++;
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left; margin-right:10px;" class="qclass">
  <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
</div>
<br>
<br>
<div style="float:left; margin-right:10px;" class="qclass">
  <input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">A
  <input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">B
  <input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">C

</div>
<br>
<br>
<div style="float:left; margin-right:10px;" class="qclass">
  <input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Male
  <input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Female
  <input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Male+Female

</div>
<span>
<button type="button" id="btn" name="btn" onclick="setRadioButtonValue()">Set</button>
</span>