Can not check the radio button dynamically using Javascript/Jquery

Question

I need one help. I need to check the radio button dynamically using Javascript/Jquery. I am explaining my code below.

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

Here 3 radio button are available .When user will click on set button one radio button should be checked as per given value. My javascript code is given below.

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

My updated code are available here

updated plunkr

Here i need to check as per the given value(i.e-var valu="5736daffed8cda709ffc8917") so as per code the Yes/No should be checked but in my case the first radio button always checked.Please help me to resolve this issue.similarly i need to also check the multiple set of radio button from each set. My plunkr code is here.

Answer 1

Use attribute selector and use :radio to select radio inputs.

Remove duplicate-id attributes

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

In your case when the loop is complete i is always set to 2. If you want to do it with for loop see this answer or you can try this simple approach with adding a class within divs.

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++;
    })
}

Add a class for the div containing the radios in my case 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>